добавить диалоговое окно подтверждения как добавленную директиву атрибута к кнопке

Я использую 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(), но тем не менее он продолжает выполнять фактическое действие.

здесь есть какое-то состояние гонки, потому что, если я создаю точки останова и оба местоположения, он останавливается. так что я думаю, это неправильный способ сделать это.

есть идеи, как это правильно реализовать?

Благодарность


typescript angular event-propagation
person ufk    schedule 19.01.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это обязательно должно быть событие щелчка? Если это необходимо, вы можете попытаться предотвратить это с помощью события 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());
  }
}
person Felix    schedule 19.01.2021
comment
отличный ответ. это не обязательно должно быть событие щелчка. это имеет больше смысла. Благодарность - person ufk; 20.01.2021