簡體   English   中英

首次單擊后,Angular2刪除單擊事件綁定

[英]Angular2 remove click event binding after first click

在我的應用程序中,我有一個按鈕,甚至可以點擊它:

<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事件。 因此,在此之后,單擊時,將觸發原始邏輯和“單擊塊”控制台日志!

方法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函數將不執行任何操作(從現在開始。

bool: boolean = true;

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

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

為執行添加一個保護變量的缺點是實際的事件監聽器仍然存在並且在點擊時會觸發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>

對於處理Observable / Subject以處理某些事件的人:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM