动态添加事件监听器
动态添加事件监听器
提问于 2016-01-29 16:53:55
我刚刚开始使用Angular 2，我想知道是否有人能告诉我动态添加和删除元素中事件侦听器的最好方法。
我有一个组件设置好了。当单击模板中的某个元素时，我希望将mousemove的侦听器添加到同一模板的另一个元素中。然后，我想在单击第三个元素时删除此侦听器。
我只是使用普通的Javascript抓取元素，然后调用标准的addEventListener()，就实现了这一点，但我想知道是否有更"Angular2.0“的方法，我应该研究一下。
回答 2
Stack Overflow用户
发布于 2018-02-26 17:35:00
我也觉得这非常令人困惑。正如@EricMartinez指出的那样，Renderer2 listen()返回删除侦听器的函数：
ƒ () { return element.removeEventListener(eventName, /** @type {?} */ (handler), false); }如果我要添加一个监听器
this.listenToClick = this.renderer.listen('document', 'click', (evt) => {
alert('Clicking the document');
})我希望我的函数执行我想要的，而不是完全相反的，即删除侦听器。
// I´d expect an alert('Clicking the document');
this.listenToClick();
// what you actually get is removing the listener, so nothing...在给定的场景中，将其命名为：
// Add listeners
let unlistenGlobal = this.renderer.listen('document', 'click', (evt) => {
console.log('Clicking the document', evt);
})
let removeSimple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
console.log('Clicking the button', evt);
});这肯定有很好的理由，但在我看来，这是非常误导和不直观的。
Stack Overflow用户
发布于 2018-06-27 02:45:28
以下是我的解决方法：
我用Angular 6创建了一个库。我添加了一个通用组件commonlib-header，它在外部应用程序中像这样使用。
注意serviceReference，它是包含stringFunctionName方法的类(注入到使用commonlib-header的组件constructor(public serviceReference: MyService)中)：
<commonlib-header
[logo]="{ src: 'assets/img/logo.svg', alt: 'Logo', href: '#' }"
[buttons]="[{ index: 0, innerHtml: 'Button', class: 'btn btn-primary', onClick: [serviceReference, 'stringFunctionName', ['arg1','arg2','arg3']] }]">
</common-header>库组件是这样编写的。动态事件将添加到onClick(fn: any)方法中：
export class HeaderComponent implements OnInit {
_buttons: Array<NavItem> = []
@Input()
set buttons(buttons: Array<any>) {
buttons.forEach(navItem => {
let _navItem = new NavItem(navItem.href, navItem.innerHtml)
_navItem.class = navItem.class
_navItem.onClick = navItem.onClick // this is the array from the component @Input properties above
this._buttons[navItem.index] = _navItem
})
}
constructor() {}
ngOnInit() {}
onClick(fn: any){
let ref = fn[0]
let fnName = fn[1]
let args = fn[2]
ref[fnName].apply(ref, args)
}可重用的header.component.html
<div class="topbar-right">
<button *ngFor="let btn of _buttons"
class="{{ btn.class }}"
(click)="onClick(btn.onClick)"
[innerHTML]="btn.innerHtml | keepHtml"></button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35080387
复制相关文章
相似问题
腾讯云开发者
