Angular2：指令：捕获儿童的点击事件

Question

我知道这一定很简单，但今天无法理解 - 星期一:)

所以，我有一个响应表的指令

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>

现在，我该如何让它发挥作用？ 我不想捕获 whole.table-responsive ...但只是这两个链接

Answer 1

不想深入，但这将是一个快速的解决方案。 尝试将您的左侧，右侧信息与事件绑定，将其绑定到此类事件中

<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();
 }
}

在这种情况下，您可以通过事件对象中的左，右标志简单地知道方向并添加您的代码:)

Answer 2

谢谢@Babar Bilal，根据你的回答，我做了一个更加精致的解决方案（根据我的需要）

import {Directive, HostListener} from '@angular/core';

interface tableMouseEvent extends MouseEvent{
    direction: string
}

@Directive({
    selector: '.table-responsive'
})
export class TableResponsiveDirective {

    @HostListener('click', ['$event'])
    scroll(event: tableMouseEvent){
        if(event.direction){
            console.info('clicked: ' + event.direction);
            event.stopPropagation();
            event.preventDefault();
        }
    }
}

和观点

<div class="table-responsive">
    <a href="#" (click)="$event.direction='left'">LEFT</a>
    <a href="#" (click)="$event.direction='right'">RIGHT</a>
</div>

Answer 3

在 angular 8 及更高版本中，组件模板的工作方式如下：

<div class="table-responsive">
    <a href="#" (click)="$any($event).direction='left'">LEFT</a>
    <a href="#" (click)="$any($event).direction='right'">RIGHT</a>
</div>

否则可能会遇到问题： error TS2339: Property 'direction' does not exist on type 'MouseEvent' 。

$any 类型转换 function $any($event.target).value用于停止模板中的类型检查。 详情angular 文档