在 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>
另一个版本,只使用(点击)事件。这个时候可以用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>
您可以这样查看 even.target:
public btnClick = (e: Event) => {
const clickedBtn = <HTMLButtonElement>e.target;
console.log(clickedBtn )
}
这样,您可以跟踪点击了哪个按钮。
我正在尝试使用@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>
另一个版本,只使用(点击)事件。这个时候可以用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>
您可以这样查看 even.target:
public btnClick = (e: Event) => {
const clickedBtn = <HTMLButtonElement>e.target;
console.log(clickedBtn )
}
这样,您可以跟踪点击了哪个按钮。