[英]Inconsistent addEventListerner behaviour angular 7
I am using innerHTML
binding to create dynamic a
tag as in below code: 我使用
innerHTML
结合创建动态a
标签,如下面的代码:
<span *ngIf="msg" [innerHTML]="msg | sanitizeHtml"></span>
In .ts I am trying to add click event using addEventListerner
: 在.ts中,我尝试使用
addEventListerner
添加click事件:
ngAfterViewInit() {
this.elements = this.elem.nativeElement.querySelectorAll('.tradebtn');
if (this.elements && this.elements.length > 0) {
this.elements.forEach((f) => {
console.log(f)
f.addEventListener('click', (event) => {
console.log(event)
});
});
}
}
I get elements
elements` list to add event listener. 我得到
elements
元素列表以添加事件侦听器。 Click event listener works sometimes but doesn't work at most of the times. Click事件侦听器有时可以运行,但在大多数情况下不起作用。
I am perplexed at this behavior. 我对这种行为感到困惑。 I also tried to enclose the code
setTimeout()
but no luck. 我也尝试将代码
setTimeout()
括起来,但是没有运气。
You should use @HostListener
to handle event. 您应该使用
@HostListener
来处理事件。
Add condition event.target.matches('.tradebtn')
to check element source. 添加条件
event.target.matches('.tradebtn')
来检查元素来源。
@HostListener('document:click', ['$event'])
onclick(event) {
if(event.target.matches('.tradebtn')) {
console.log(event)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.