angular移除事件绑定事件绑定_首次单击后，Angular2删除单击事件绑定(Angular2 remove click event binding after first click)...

问 题

在我的应用程序中，我有一个单击按钮的按钮：

lt; button class ="btn btn-默认"(click)="dosomething()"gt;

在 dosomething 方法中，有没有从按钮中删除(点击)事件的任何方式(这样用户就不能再触发功能？)。

我试图在按钮上设置一个禁用道具，但它不会改变angular2行为。

我试图使用(点击)="dosomething($ event)然后

dosomething($ event){

//我的方法逻辑在这里

...

...

console.log('方法逻辑');

//尝试覆盖点击event

let target = event.target || event.srcelement || event.currenttarget;

this.renderer.listen(target，'click'，(event)=gt; {

console .log('clic block');

});

}

但它并没有"替换"click事件。所以在那之后，点击时，原始逻辑和"click block"控制台日志都会被触发！

解决方案

为执行添加一个保护变量的缺点是实际的事件监听器仍然存在并且在点击时会触发angular的变化检测，即使它没有做任何事情。

要实际删除事件监听器，必须通过组件的 renderer 添加它。这将返回一个函数，在调用时删除事件监听器：

import {component，afterviewinit，来自'@ angular / core'的渲染器，viewchild，elementref};

@component({

template：`lt; button＃buttongt; ...lt; / buttongt;`

})

导出类samplecomponent实现afterviewinit {

@viewchild('button')按钮：elementref;

private cancelclick：功能;

构造函数(私有渲染器：渲染器){}

ngafterviewinit(){

this.cancelclick = this.renderer.listen(this.button.nativeelement，'点击'，

($ event：any)=gt; this.handleclick($ event));

}

handleclick($ event：any){

this.cancelclick();

// ... ...

}

}

如果你的话目标是在第一次触发事件时删除事件侦听器，这可以作为angular事件系统的插件实现。我将其添加为 ng2的一部分-events 实用程序库 [来源] ] ，现在让您执行以下操作：

lt; button(once.click)="handleclick( $事件)"gt; ...lt; /按钮gt;