添加一个确认对话框作为向按钮添加的属性指令

如何解决添加一个确认对话框作为向按钮添加的属性指令

我使用 angular11 来编写我的项目

在很多情况下，我想要一个按钮有一个确认对话框，所以我想创建一个指令，当添加到按钮元素时，它会显示一个弹出窗口，而不是为它创建一个 mat-dialog 弹出窗口带有是/否按钮的自定义消息，只有当用户单击是时，才会执行实际的单击事件。

所以现在我只是想禁用点击事件，看看系统是否工作..但它没有:)点击事件仍然被执行。

这是我的指令：

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

@Directive({
  selector: '[comTuxinConfirm]'
})
export class TuxConfirmDirective {

  constructor(el: ElementRef) {
    el.nativeElement.addEventListener('click',this.clickEventHandler);
  }

  clickEventHandler(e: MouseEvent): boolean {
      e.preventDefault();
      e.stopPropagation();
      return false;
  }

}

这就是我使用它的方式：

    <button *ngIf="actionLabel" comTuxinConfirm mat-button (click)="onActionClicked()">{{actionLabel}}</button>

在调试时，我看到 comTuxinConfirm 的事件处理程序首先执行，在 onActionClicked() 之前，但它仍然继续执行实际操作。

这里存在某种竞争条件，因为如果我创建断点和两个位置，它就会停止。所以我想这不是正确的方法。

任何想法如何正确实施？

谢谢

解决方法

它必须是点击事件吗？如果必须如此，您可以尝试使用在单击之前触发的 mousedown 事件来阻止它。但是如果你想正确地实现这一点，你可能应该使用一个 observable。

您的按钮看起来像这样：

    <button comTuxinConfirm mat-button (onOk)="onActionClicked()">{{actionLabel}}</button>

还有你的指令：

export class TuxConfirmDirectiveDirective {
  @Output() onOk = new Subject<void>();

  constructor(private dialog: MatDialog) {}

  @HostListener("click")
  click(e: MouseEvent): void {
    this.dialog.open(MyDialogComponent).afterClosed().subscribe(r => this.onOk.next());
  }
}