angular12自定义指令防止2重点击

方法一

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appPreventDoubleClick]'
})
export class PreventDoubleClickDirective {
  private isClicked: boolean = false;

  constructor(private elementRef: ElementRef) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    if (this.isClicked) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      this.isClicked = true;
      setTimeout(() => {
        this.isClicked = false;
      }, 1000); // 设置一个合适的时间间隔，比如1秒
    }
  }
}

方法二

@Directive({
  selector: '[preventDoubleClick]'
})
export class PreventDoubleClickDirective {
  private canClick = true;

  constructor(private elementRef: ElementRef) {}

  @HostListener('click')
  onClick() {
    if (this.canClick) {
      this.canClick = false;
      // 执行点击事件的逻辑
      // 例如发送请求等
      // ...

      setTimeout(() => {
        this.canClick = true;
      }, 1000); // 设置一个延迟时间，在延迟时间内不可点击
    }
  }
}

方法三

使用 debounceTime 可以防止按钮的重复点击。debounceTime 会等待一段时间，只有在该时间内没有新的事件发生时，才会将事件传递给订阅者。这样就可以防止按钮的连续点击。

下面是一个示例代码：

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const button = document.getElementById('myButton');

// 创建一个 Observable，监听按钮的点击事件
const click$ = fromEvent(button, 'click');

// 使用 debounceTime(1000) 来防止按钮的连续点击
click$.pipe(
  debounceTime(1000)
).subscribe(() => {
  console.log('Button clicked');
});

在上面的代码中，debounceTime(1000) 表示等待 1000 毫秒，如果在这段时间内没有新的点击事件发生，才会将点击事件传递给订阅者。这样就可以防止按钮的重复点击。

你可以根据需要调整 debounceTime 的时间间隔来适应不同的场景。

$ 并不是特定的语法，而是一个命名约定。在 RxJS 中，通常将 Observable 对象的变量名以 $ 结尾，以表示该变量是一个 Observable 对象。这是一种命名约定，用于提醒开发人员该变量是一个 Observable 对象，可以通过订阅来监听其发出的事件。

方法四

以下是使用RxJS编写的防止2次点击的自定义指令示例：

import { Directive, ElementRef, HostListener } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[preventDoubleClick]'
})
export class PreventDoubleClickDirective {
  private destroy$ = new Subject();

  constructor(private elementRef: ElementRef) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    event.stopPropagation();
    event.preventDefault();

    fromEvent(this.elementRef.nativeElement, 'click')
      .pipe(
        debounceTime(300), // 设置防抖时间
        takeUntil(this.destroy$)
      )
      .subscribe(() => {
        // 执行点击事件的逻辑
        console.log('Clicked');
      });

    this.destroy$.next(); // 销毁上一次的点击事件
  }
}

在上述示例中，我们定义了一个名为preventDoubleClick的自定义指令。该指令会防止连续2次点击事件的触发。

debounceTime 的时间单位是毫秒（ms）

我们使用fromEvent方法来创建一个可观察对象，监听指定元素的click事件。然后，我们使用debounceTime操作符来设置防抖时间，即在两次点击之间必须等待一定的时间间隔。最后，我们使用takeUntil操作符来在下一次点击事件到来时取消订阅上一次的点击事件。

在onClick方法中，我们首先阻止默认的点击事件行为和事件冒泡。然后，我们订阅可观察对象，执行点击事件的逻辑。最后，我们通过this.destroy$.next()来销毁上一次的点击事件的订阅。

要使用该自定义指令，只需要将其添加到需要防止2次点击的元素上，例如：

Click me

这样，当用户连续点击按钮时，只有在一定时间间隔内的第一次点击事件会触发。

1. fromEvent: fromEvent 是 RxJS 中的一个操作符，用于从 DOM 事件、Node.js 事件或其他事件源中创建一个 Observable。它接收两个参数：事件源和事件名称。例如，可以使用 fromEvent(document, 'click') 来创建一个 Observable，它会在每次点击文档时发出一个值。

2. .pipe: .pipe 是 RxJS 中的一个方法，用于将多个操作符链接在一起，形成一个操作符链。它接收一个或多个操作符作为参数，并返回一个新的 Observable。通过使用 .pipe，可以按照特定的顺序应用多个操作符。

3. takeUntil: takeUntil 是一个操作符，它接收一个 Observable 作为参数，并且会在这个参数 Observable 发出第一个值时，终止源 Observable。例如，可以使用 takeUntil(stopObservable) 来在 stopObservable 发出值时停止源 Observable 的发出。