首次单击后,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');
    });
}

但它不会"替换"click事件.因此,在此之后,单击时,将触发原始逻辑和"单击块"控制台日志!

Answer 1

方法1:

您可以设置boolean变量,因此如果用户调用该函数,则boolean值会更改,并且用户可以再次单击时调用该函数,但实际上不会发生任何事情.

bool: boolean = true;

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

方法2:

您可以向html组件添加一个条件,如果指定的变量(在这种情况下bool)为true,则该函数将被执行,但只执行一次,因为该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"

Answer 2

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

要实际删除事件侦听器,您必须通过组件添加它Renderer.这将返回一个函数,该函数在调用时删除事件侦听器:

import {Component, AfterViewInit, Renderer, ViewChild, ElementRef} from '@angular/core';

@Component({
  template: `<button #button>...</button>`
})
export class SampleComponent implements AfterViewInit {

  @ViewChild('button') button: ElementRef;
  private cancelClick: Function;

  constructor(private renderer: Renderer) {}

  ngAfterViewInit() {
    this.cancelClick = this.renderer.listen(this.button.nativeElement, 'click',
      ($event: any) => this.handleClick($event));
  }

  handleClick($event: any) {
    this.cancelClick();
    // ...
  }
}

如果您的目标是在第一次触发事件时删除事件侦听器,则可以将其实现为Angular事件系统的插件.我将它添加为我的ng2-events实用程序库[source]的一部分,它现在允许您执行以下操作:

<button (once.click)="handleClick($event)">...</button>