添加确认对话框作为添加属性指令到按钮

Question

我用angular11写我的项目

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

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

这是我的指令：

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() 之前执行，但它仍然继续执行实际操作。

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

有什么想法可以正确实施吗？

谢谢

Answer 1

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

您的按钮看起来像这样：

    <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());
  }
}

添加确认对话框作为添加属性指令到按钮

add a confirm dialog as added attribute-directive to a button

event-propagation

typescript

angular