Angular 组件：禁用点击事件

Question

我正在创建一个像这样的可重用组件：

<my-button [isDisabled]="isDisabled" (click)="click($event)"> submit </my-button>

当属性 isDisabled 为 true 时，我想禁用单击事件，我尝试过类似的操作，但它不起作用。

包/组件/my-button.component.html

<button  [disabled]="isDisabled" #myButton>
        <ng-content></ng-content>
</button>

包/组件/my-button.component.ts

@ViewChild('uxButton') uxButton: ElementRef;
@Input() isDisabled: boolean = false;

this.myButton.nativeElement.parentNode.removeEventListener('click' , (e) => {
       e.stopPropagation();
});

Answer 1

像这样尝试

<button  [disabled]="isDisabled" (click)="btnClick.emit($event)">
        <ng-content></ng-content>
</button>

@Input() isDisabled: boolean = false;
@Output() btnClick = new EventEmitter();

使用Output和默认情况下，如果按钮被禁用，按钮单击事件将不起作用。利用它

<my-button [isDisabled]="isDisabled" (btnClick)="click($event)"> submit </my-button>

Answer 2

它也可以通过以下 CSS 解决：

# This prevents host to get a direct click
:host {
  pointer-events: none;
}

# This prevents the span inside the button to "steal" the click from the button
:host /deep/ button span {
  pointer-events: none;
}

# Now only the button can get a click 
# Button is the only smart enough to stop propagation when needed
button {
  pointer-events: auto;
}

现在你不要像其他答案一样手动传递点击事件：你有旧的（点击）事件：D

<my-button [isDisabled]="isDisabled" (click)="click($event)"> submit </my-button>

在您的自定义组件中，您只需要传递 disabled 属性：

<button  [disabled]="isDisabled" #myButton>
        <ng-content></ng-content>
</button>

还要考虑从另一个 stackoverflow 答案修改的stackblitz。

Answer 3

如果您想保留旧版单击事件而不使用输出。有一个基于先前解决方案的组合解决方案。

我的按钮.component.html

<button [disabled]="disabled">
  <ng-content></ng-content>
</button>

我的按钮.component.ts

export class MyButtonComponent {
  @HostBinding('style.pointer-events') get pEvents(): string {
    if (this.disabled) {
      return 'none';
    }
    return 'auto';
  }

  @Input()
  disabled: boolean = false;

 constructor() {}
}

您将在其中调用组件的父组件，例如app.component.html

<my-button [disabled]="isDisabled" (click)="onClickFnc()">
  <span>Save which not trigger click when button is disabled</span>
</my-button>

Answer 4

您可以在(click)属性上检查它：

<my-button [isDisabled]="isDisabled" (click)="!isDisabled && click($event)"> submit </my-button>