Angular2 在第一次点击后删除点击事件绑定

Question

在我的应用程序中，我有一个按钮，甚至可以单击它：

 <button class="btn btn-default" (click)="doSomething()">

在 doSomething 方法中，有没有办法从按钮中删除 (click) 事件（这样用户就不能再触发功能了？）。

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

我尝试使用 (click)="doSomething($event) 然后

doSomething($event) {
  // My method logic goes here
  ...
  ...
  console.log('Method Logic');

  //Attempt to overwrite click event
  let target = event.target || event.srcElement || event.currentTarget;
  this.renderer.listen(target, 'click', (event) => {
      console.log('clic block');
    });
}

但它不会“取代”点击事件。所以在那之后，点击时，原始逻辑和“点击块”控制台日志都会被触发！

原文由 BlackHoleGalaxy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

方法一：

您可以设置一个 boolean 变量，因此如果用户调用该函数， boolean 值发生变化，用户将能够在再次单击时调用该函数，但实际上什么都不会发生。

 bool: boolean = true;

doSomething($event) {
  if (this.bool) {
    // My method logic goes here
    ...
    ...
    console.log('Method Logic');
    this.bool = false;
  }
}

方法二：

您可以向 html 组件添加条件，如果指定的变量（在本例中为 bool ）为真，则该函数将被执行，但只会执行一次，因为 bool 变量将设置为 false 并且 click 函数从现在起将不执行任何操作（null）。

 bool: boolean = true;

doSomething($event) {
  // My method logic goes here
  ...
  ...
  console.log('Method Logic');
  this.bool = false;
}

(click)="bool ? doSomething($event) : null"

原文由 kind user 发布，翻译遵循 CC BY-SA 3.0 许可协议