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');
    });
}

但它没有＆＃34;取代＆＃34;点击事件。所以在那之后，点击，原始逻辑和＆＃34;点击块＆＃34;触发控制台日志！

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）为真，该函数将被执行，但只有一次，因为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>

Answer 3

对于处理某些事件的Observable / Subject人：

<button (click)="clickEvents$.next($event)">

class MyComponent {
  clickEvents$ = new Subject<MouseEvent>();
  firstClick$ = this.clickEvents.take(1); // Observable of first click
}

首次单击后，Angular2删除单击事件绑定

3 个答案: