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

Angular2 remove click event binding after first click

提问by BlackHoleGalaxy

In my application I have a button with a click even on it:

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

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

From within the doSomethingmethod, is there any way to remove the (click)event from the button (so the user can't trigger the functionnality anymore?).

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

I tried to set a disabled prop on the button but it doesn't change Angular2 behavior.

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

I tryed to use (click)="doSomething($event)and then

我尝试使用(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');
    });
}

But It doesn't "replace" the click event. So after that, on click, both original logic and the "click block" console log are triggered!

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

回答by kind user

Method 1:

方法一：

You can set a booleanvariable, so if the user calls the function, booleanvalue changes and the user will be able to call the function on click again but actually nothing will happen.

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

bool: boolean = true;

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

Method 2:

方法二：

You can add a condition to your html component, if specified variable (in this case bool) is true, the function is going to be executed, but only once because the boolvariable will be set to false and the clickfunction will execute nothing (null) from now on.

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

bool: boolean = true;

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

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

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

回答by kryops

The downside of just adding a guard variable for the execution is that the actual event listener is still in place and will trigger Angular's change detection when clicked, even though it doesn't do anything.

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

To actually remove the event listener, you have to add it via the component's Renderer. This will return a function that removes the event listener when called:

要实际删除事件侦听器，您必须通过组件的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();
    // ...
  }
}

If your goal is to just remove the event listener when the event is fired for the first time, this can be implemented as a plugin to Angular's event system. I added it as a part of my ng2-eventsutility library [source], which lets you now do the following:

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

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

回答by n00dl3

For people dealing with Observable/ Subjectfor handling some events :

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

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

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