Angular允许您将多个方法绑定到一个点击事件。这意味着您可以绑定一个通用的"；点击"；方法，该方法接受元素的ID，并且不修改特定于该按钮的事件处理程序方法，如下所示：
我有一个角度应用程序，它有多个具有特定ID的按钮。每个方法都有一个点击功能，我想跟踪用户是否点击了按钮，而不更改每个方法中的任何内容。
示例代码：
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
@ViewChild('BUTTON_EDIT', {read: ElementRef}) BUTTON_EDIT;
@ViewChild('BUTTON_ADD', {read: ElementRef}) BUTTON_ADD;
ele: Element;
ngAfterViewInit(): void {
let clickStream;
//check which element was pressed and get the id
//how can i check it?
clickStream = fromEvent(this.ele, 'clicked');
var id = this.ele.id;
clickStream.subscribe(event => {
//send info
});
}
}
为了监听多个事件，您可以使用merge，哪个
将多个可观测值转换为单个可观测
ngAfterViewInit(): void {
merge(
fromEvent(this.BUTTON_EDIT.nativeElement, 'click'),
fromEvent(this.BUTTON_ADD.nativeElement, 'click'),
).subscribe((event: Event)=> {
console.log(event.target.id);
});
}
还有一篇文章——在Angular中使用FromEvent从事件创建Observable，这篇文章解释了细节。
Web API中的事件
对于已发射的Event，有一个target属性，您可以从中获取元素的id，还有一个fiddlehttps://jsfiddle.net/a907jf5g/
收听点击事件的角度方法
@Component({
template: `
<button (click)="add()">Add</button>
<button (click)="edit()">Edit</button>
`,
})
export class MyComponent {
add() {
// add clicked
}
edit() {
// edit clicked
}
}
<button id="add-btn" #addBtn (click)="click(addBtn.id); add()">
Add
</button>
<button id="edit-btn" #editBtn (click)="click(editBtn.id); edit()">
Edit
</button>
click方法跟踪所有按钮单击，而add和edit方法是每个按钮特有的事件处理程序。
StackBlitz 示例