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> 

ここで私はどのように動作させるのですか？私は全体の反応をキャプチャしたくありません...しかし、これらの2つのリンクだけ

Answer 1

これはあなたのための迅速な解決策になります。あなたは、単に左、右のフラグによって方向を知ることができる。この場合、この

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

のようにそれを抽出し、この

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

のようなイベントと内部にそれをバインドし、イベントであなたの左、右の情報をバインドするようにしてくださいそしてイベントオブジェクトには、あなたのコード:)

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>