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> 

现在，我该如何让它工作？我不想捕捉整个.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比拉尔，根据您的回答，我做了一个更完美的解决方案（我需要）

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>