如何实现Angular自定义按钮组件禁用时阻止宿主点击事件？

当然可以做到！要让你的my-button组件在isDisabled为true时，完全复现原生按钮禁用时不触发点击事件的行为，你可以通过监听宿主元素的点击事件并阻止事件传播来实现，具体方案如下：

核心实现代码 #

在你的MyButtonComponent中，使用@HostListener装饰器监听宿主元素的点击事件，当组件处于禁用状态时，阻止事件的默认行为和传播：

import { Component, Input, HostListener } from '@angular/core';

@Component({
  selector: 'my-button',
  template: `
    <button [disabled]="isDisabled" class="my-button">
      <ng-content></ng-content>
    </button>
  `,
  styles: [`
    .my-button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .my-button:disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
  `]
})
export class MyButtonComponent {
  // 接收外部传入的禁用状态
  @Input() isDisabled = false;

  // 监听宿主元素的点击事件
  @HostListener('click', ['$event'])
  handleHostClick(event: Event): void {
    // 当组件禁用时，阻止事件继续传播和默认行为
    if (this.isDisabled) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
}

为什么这样有效？ #

• 原生按钮的disabled属性会阻止自身的点击事件，但用户点击的是<my-button>这个宿主组件元素时，原生按钮的禁用逻辑管不到宿主的点击事件，所以需要我们主动监听宿主的点击。
• 通过event.stopPropagation()可以阻止事件向上冒泡到外部的(click)绑定，而event.preventDefault()则确保不会触发任何默认的浏览器行为，和原生按钮的表现完全一致。

使用示例 #

当你像这样使用组件时：

<my-button (click)="onClick()" [isDisabled]="true">Save</my-button>

只要isDisabled为true，外部的onClick()方法就不会被调用，完美复现原生按钮的禁用行为。

内容的提问来源于stack exchange，提问作者Ryan Silva