为什么我不能像这样禁用 mat-stroke-button？

Question

我正在尝试基于 Angular Material 按钮构建自定义按钮。

问题是，由于某种原因，我不能再正确地disable 按钮了。样式等有效，但由于某种原因，button 中的内容似乎仍然适用于(click) 事件。

查看StackBlitz example，您可以在其中单击“禁用”以及“Spinner+Disabled”按钮。

HTML：

<button mat-stroked-button [color]="color" [disabled]="disabled || loading" [type]="type">
  <mat-icon *ngIf="icon" [class.hidden]="loading">{{icon}}</mat-icon>
  <span [class.hidden]="loading"><ng-content></ng-content></span>
  <div *ngIf="loading" class="spinner-wrapper">
    <mat-spinner [diameter]="20"></mat-spinner>
  </div>
</button>

组件：

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


@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {

  @Input() icon: string;

  @Input() color = 'primary';

  @Input() disabled = false;

  @Input() type = 'submit';

  private _loading = false;

  @Input()
  set loading(loading: boolean) {
    this._loading = loading;
  }

  get loading(): boolean {
    return this._loading;
  }

}

样式：

:host {
  display: inline-grid;
}

.hidden {
  visibility: hidden;
}

.spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

知道如何防止这种情况发生吗？

Answer 1

另一种解决方案是 CSS 指针事件：无

? button.component.css

:host {
  display: inline-grid;
}

.hidden {
  visibility: hidden;
}

.spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* ######## add this pointer-events acting classes ####### */
.disabled {
  pointer-events: all;
 }

:host{
  pointer-events: none;
 }

? button.component.html

<!-- and just add [class.disabled]="!disabled" to the button-->
<button mat-stroked-button [color]="color" [disabled]="disabled || loading" [type]="type" [class.disabled]="!disabled">
  <mat-icon *ngIf="icon" [class.hidden]="loading">{{icon}}</mat-icon>
  <span [class.hidden]="loading"><ng-content></ng-content></span>
  <div *ngIf="loading" class="spinner-wrapper">
    <mat-spinner [diameter]="20"></mat-spinner>
  </div>
</button>

https://stackblitz.com/edit/stackoverflow-56211649

Answer 2

这是因为(click) 事件不在按钮上，而是在app-button 标签上。如果将点击处理程序传递给组件，并在按钮标签上设置(click) 属性，则禁用它不会触发。