可以使用 Renderer2.listen() 方法进行多个元素的事件监听。可以在同一个监听器中传递多个元素,然后在事件回调中处理事件。
示例代码:
import { Component, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Elem1
Elem2
`,
styles: [`
.elem {
width: 100px;
height: 100px;
background-color: #ddd;
margin: 10px;
}
`]
})
export class AppComponent {
constructor(
private elRef: ElementRef,
private renderer: Renderer2
) {}
ngOnInit() {
const elem1 = this.elRef.nativeElement.querySelector('.elem:nth-child(1)');
const elem2 = this.elRef.nativeElement.querySelector('.elem:nth-child(2)');
this.renderer.listen(elem1, 'click', this.onClick.bind(this));
this.renderer.listen(elem2, 'click', this.onClick.bind(this));
}
onClick(event) {
console.log(event.target);
}
}
在上面的示例中,我们在两个 div 元素上监听了 click 事件,然后在事件处理程序中可以访问事件的目标元素。