我知道这一定很简单,但今天 - 星期一无法理解 :)
所以,我有一个响应式表格的指令
import {Directive, HostListener} from '@angular/core';
@Directive({
selector: '.table-responsive'
})
export class TableResponsiveDirective {
@HostListener('click', ['$event']) scroll(direction: string, event: MouseEvent){
console.info('clicked: ' + direction + ' ' +event);
event.stopPropagation();
event.preventDefault();
}
}
这是我的看法
<div class="table-responsive">
<a href="#" (click)="scroll('left', $event)">LEFT</a>
<a href="#" (click)="scroll('right', $event)">RIGHT</a>
<table>...</table>
</div>
现在,我该如何让它发挥作用?我不想捕获整个 .table-responsive... 但只是那两个链接
最佳答案
不想深入,但这对您来说是一个快速的解决方案。尝试用事件绑定(bind)你的左,右信息,像这样用事件绑定(bind)它里面
<div class="table-responsive">
<a href="#" (click)="$event.left = true">LEFT</a>
<a href="#" (click)="$event.right = true">RIGHT</a>
<table>...</table>
</div>
像这样提取
import {Directive, HostListener} from '@angular/core';
@Directive({
selector: '.table-responsive'
})
export class TableResponsiveDirective {
@HostListener('click', ['$event'])
scroll($event){
if ($event.left) {
console.info('clicked: ' + $event.left);
} else if ($event.right) {
console.info('clicked: ' + $event.right);
}
event.stopPropagation();
event.preventDefault();
}
}
在这种情况下,您可以通过事件对象中的左、右标志简单地知道方向并添加您的代码:)
关于javascript - Angular 2 : Directives: capturing click event on children,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43325659/