在角度组件代码中控制我的子组件(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>

问题是我无法找出我的哪个按钮被点击了，因为 #del、#show 等道具在渲染后消失了，实际上我不想添加额外的 id 属性或类似的东西。有没有办法在不处理 DOM 的情况下监听组件类代码中的按钮？

更新

我没有找到好的解决方案，最终得到了这个：

<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>

演示

---

另一个版本，仅使用（单击）事件。这次可以使用 event.currentTarget：

打字稿：

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

.HTML

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

演示

Answer 2

你可以像这样检查even.target：

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

这样，您可以跟踪单击了哪个按钮。