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>