子コンポーネント（md-button）の角度コンポーネントコードを制御できますか？

Question

私は@ViewChildを使用して、子MdButtonコンポーネントの制御を取るしようとしている：

// In my component: 
@ViewChild('add') private _add: MdButton; 
@ViewChild('upload') private _upload: MdButton; 
@ViewChild('del') private _del: MdButton; 
... 
public btnClick = (e) => { console.log(e) } 

今、私はそれらのいずれかがクリックされたかを調べるためにしようとしている：

/* In template: */ 
<button md-button #del (click)="btnClick($event)">Delete</button> 
<button md-button #change (click)="btnClick($event)">Change</button 
<button md-button #show (click)="btnClick($event)">Show</button> 

問題があることですボタンのどれがbeacouse #del、#showなどをクリックしたかわかりません。レンダリング後に小道具が消えてしまいましたが、実際にはid属性などを追加したくありません。 DOMを処理せずにコンポーネントクラスコード内のボタンを聴く方法はありますか？

UPDATE

私は素敵な解決策を見つけるdid'tし、これで終わった：

<button md-raised-button #del (click)="_click.next('del')">Delete</button> 
<button md-raised-button #add (click)="_click.next('add')">Add</button> 

と

... 
@ViewChild('del') private _del: MdButton; 
@ViewChild('add') private _add: MdButton; 

private _click = new Subject(); 
public clicked$ : Observable<any> = this._click.asObservable(); 
... 
this.clicked$.subscribe(x=>console.log(`Button #${x} is clicked`)); 

Answer 1

をあなたはコンポーネントクラスまたは書き込みの内側HostListenerを設定することができますディレクティブを各ボタンに設定し、hostlistenerをディレクティブの中に入れます。次に、event.targetにアクセスして、クリックされたボタンを確認することができます。

活字体：ちょうど（クリック）イベントを使用して

@ViewChild('show') private show; 

@HostListener('document:click', ['$event', '$event.target']) 
    onClick(event: MouseEvent, targetElement: HTMLElement): void { 

     if (!targetElement) { 
      return; 
     } 
     if (targetElement === this.show.nativeElement) { 
      console.log('"Просмотреть" нажата') 
     } 
} 

HTML

<button #show>Просмотреть</button> 

DEMO

---

他のバージョン、。この時間event.currentTargetを使用することができます。

活字体：

@ViewChild('show') private show; 

    ngOnInit() { 
    } 

    onClick(event): void { 
    if (event.currentTarget === this.show.nativeElement) { 
     console.log('"Просмотреть" нажата') 
    } 
    } 

HTMLあなたはこのようeven.targetを確認することができます

<button #show (click)="onClick($event)">Просмотреть</button> 

DEMO

Answer 2

：

public btnClick = (e: Event) => { 
    const clickedBtn = <HTMLButtonElement>e.target; 
     console.log(clickedBtn) 
} 

この方法で、どのボタンがクリックされたかを追跡できます。