我试图阻止禁用按钮上的单击事件，换句话说，防止一些删除禁用属性的用户调用某些操作。
现在，我有下面的代码来做这件事：

<button [disabled]="someCondition" (click)="executeAction()">Execute action</button>

executeAction(): void {
  if (this.someCondition) return;

  // ...
}

工作，但它不是一个好的解决方案，因为我必须为我的应用程序中的所有按钮做这件事（相信我，很容易忘记这样做，甚至 Linter 不能帮助我在这里）。
在寻找更强大的解决方案时，我认为directive可以帮助我：

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

@Directive({
  selector: 'button'
})
export class ButtonDirective {
  @Input() set disabled(value: boolean) {
    this._disabled = value != null;
    this.renderer2.setAttribute(this.elementRef.nativeElement, 'disabled', `${this._disabled}`);
  }

  private _disabled: boolean;

  constructor(
    private readonly elementRef: ElementRef,
    private readonly renderer2: Renderer2
  ) { }

  @HostListener('click', ['$event'])
  onClick(mouseEvent: MouseEvent) {
    // nothing here does what I'm expecting
    if (this._disabled) {
      mouseEvent.preventDefault();
      mouseEvent.stopImmediatePropagation();
      mouseEvent.stopPropagation();

      return false; // just for test
    }
  }
}

<button [disabled]="someCondition" (click)="executeAction()">Execute action</button>

executeAction(): void {
  console.log('still being called');
}

……但是它什么也没做。它不会阻止click事件。有没有什么解决方案，我不必在调用中控制动作本身？
STACKBLITZ