Angular 延迟应用指令中的原始点击事件

我想创建一个指令，当用户单击按钮时请求确认。为此，我应该能够存储原始事件，并仅在用户确认其选择后调用它

我在这里嘲笑过类似的行为：

（这是一个超时，不是确认，但问题是相同的）

如何继续存储原始事件，然后在超时/确认结束后调用它

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

@Directive({
  selector: '[confirm]'
})
export class ConfirmDirective {

  constructor() { }

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    console.log('handler from directive');
    // 1 - Would like to store original event
    const originalEvent = () => {};
    // Would like to call it later
    setTimeout(() => {
      originalEvent();
    })
  }

}

---

您可以构建指令来截获点击并仅在通过条件时发出点击：

@Directive({
    selector: '[confirm]',
})
export class ConfirmDirective implements OnInit, OnDestroy {
    @Output() confirmed = new EventEmitter();
    private clicks = new Subject();
    private subscription: Subscription;

    constructor() {}

    ngOnInit() {
        this.subscription = this.clicks
            .pipe(
                switchMap((event) =>
                    confirm('Do you agree?') ? of(event) : null
                )
            )
            .subscribe((e) => this.confirmed.emit(e));
    }

    ngOnDestroy() {
        if (this.subscription) this.subscription.unsubscribe();
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.preventDefault();
        event.stopPropagation();
        this.clicks.next(event);
    }
}

用法：

  <button confirm (confirmed)="doSomething()">Click</button>

点击

---

祝你好运

您可以构建指令来拦截点击并仅在条件通过时发出点击：

@Directive({
    selector: '[confirm]',
})
export class ConfirmDirective implements OnInit, OnDestroy {
    @Output() confirmed = new EventEmitter();
    private clicks = new Subject();
    private subscription: Subscription;

    constructor() {}

    ngOnInit() {
        this.subscription = this.clicks
            .pipe(
                switchMap((event) =>
                    confirm('Do you agree?') ? of(event) : null
                )
            )
            .subscribe((e) => this.confirmed.emit(e));
    }

    ngOnDestroy() {
        if (this.subscription) this.subscription.unsubscribe();
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        event.preventDefault();
        event.stopPropagation();
        this.clicks.next(event);
    }
}

用法：

  <button confirm (confirmed)="doSomething()">Click</button>

点击

---

祝你好运

你想要这样的吗@JanakPrajapati的想法是的，但我不希望它是一个组件，只是一个指令。@JanakPrajapati，还有，我不希望有一个显示“打开对话框”的按钮，而是一个显示“确认”并执行X的按钮，当你点击它时，它会打开一个对话框进行确认：如果你确认，它执行X，如果不执行，它什么也没做，可能是威尔help@PrashantPimpale我用的是AngularJS，不是AngularJS，概念不一样。你想要这样的东西吗@JanakPrajapati的想法是的，但我不希望它是一个组件，只是一个指令。@JanakPrajapati，还有，我不希望有一个显示“打开对话框”的按钮，而是一个显示“确认”并执行X的按钮，当你点击它时，它会打开一个对话框进行确认：如果你确认，它执行X，如果不执行，它什么也没做，可能是威尔help@PrashantPimpale我用的是AngularJS，不是AngularJS，概念不一样。真的！真不敢相信有那么愚蠢。我想绑定

click

事件，当时我很难，但我一次也没想过要更改事件名称。。。非常感谢。（斯塔克布利兹：）真的！真不敢相信有那么愚蠢。我想绑定

click

事件，当时我很难，但我一次也没想过要更改事件名称。。。非常感谢。（闪电战：）