在 angular 组件代码中控制我的子组件(md-button)?

Take control of my child components (md-button) in angular component code?

我正在尝试使用@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 的情况下在我的组件 class 代码中收听我的按钮?

更新

我没有找到很好的解决方案,结果是这样的:

<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`));

您可以在组件 class 中设置一个 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

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

DEMO

您可以这样查看 even.target:

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

这样,您可以跟踪点击了哪个按钮。