@HostBinding('disabled') 不适用于 Angular 材料 12答案

【问题标题】：@HostBinding('disabled') not working with Angular material 12@HostBinding('disabled') 不适用于 Angular 材料 12
【发布时间】：2021-11-23 15:38:01
【问题描述】：

自定义指令 ...

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('disabled')
  disabled = true;

  constructor() { }

  @Input('myDirective')
  set myData(data: string[]) {
    this.disabled = someDirectiveLogic(data);
  }
  
  // ...
}

... 有一些特定的逻辑来禁用按钮。在纯 HTML 按钮上使用指令时：

<a mat-raised-button color="accent"
  [disabled]="system.selection.length === 0"
>View</a>

<button color="accent"
  [myDirective]="system.selection"
>Pause</button>

该指令运行良好：

没有选择，禁用右侧的按钮：
选择数据，启用右侧按钮：

在使用 Angular Material v12 的 Pause 按钮上添加 mat-raised-button 属性时，该按钮始终显示为启用：

同样的代码适用于 Angular Material v6.3，由指令设置的 disabled 属性将与 mat-raised-button 结合使用。

我们不能在 Angular 材质 12 中使用 @HostBinding('disabled') 吗？

【问题讨论】：

你可以试试@HostBinding('attr.disabled')
嗨@Andrei，使用@HostBinding('attr.disabled') 不会改变带有mat-raised-button 的按钮的行为。此更改还通过自定义指令打破了标准按钮的启用/禁用（没有mat-raised-button）:(

标签： angular angular-material

【解决方案1】：

查看 Angular Material 按钮的源代码后，我找到了一个适用于标准按钮和材质按钮的解决方案。

在 button.ts 的第 70 行中，我注意到使用 host 属性元数据而不是 HostBinding 装饰器可以按预期工作。所以指令现在实现为：

@Directive({
  selector: '[myDirective]',
  host: {
    '[attr.disabled]': 'disabled || null',
    '[class.mat-button-disabled]': 'disabled',
  },
})
export class MyDirective {

  disabled = true;

  constructor() { }

  @Input('myDirective')
  set myData(data: string[]) {
    this.disabled = someDirectiveLogic(data);
  }
  
  // ...
}

此示例在stackblitz.com 中进行了说明。

【讨论】：