以角度組件代碼控制我的子組件（md-button）？

我試圖用@ViewChild把孩子MdButton部件的控制：以角度組件代碼控制我的子組件（md-button）？

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

來源

2017-10-06 Anton Pegov

爲什麼沒有不同的方法來調用不同的按鈕？ – jonrsharpe

是的，這將工作），但如果我會有很多按鈕 - 它會混亂在我好的組件中的方法... –

然後你不想讓這些按鈕*做不同的事情嗎？ – jonrsharpe

你可以設置一個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

來源

2017-10-06 16:38:39 Vega

它很接近，但仍然不乾淨，您能否提供一個如何「在組件類中設置HostListener」的示例？ –

這裏是一個演示：https://stackblitz.com/edit/angular-ousjfy?file=app%2Fapp.component.ts – Vega

其他解決方案可能是這樣的：https：//stackblitz.com/edit/angular- hzui99？file = app％2Fapp.component.ts – Vega

您可以檢查even.target這樣：

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

這樣，您可以跟蹤哪個按鈕被點擊。

來源

2017-10-06 18:16:29 asmmahmud

在我看來，OP不需要額外的參數：「我不想添加額外的id屬性或類似的東西。」 – Vega

以角度組件代碼控制我的子組件（md-button）？

回答

相關問題