Angular Material mat-button无法通过外部自定义指令正确更新禁用状态的问题

看起来你遇到的问题是直接操作原生DOM属性后，Angular Material的mat-button没有同步更新它的禁用样式和类——这是因为Material组件的状态依赖于Angular的输入绑定机制，而不是原生DOM属性的直接修改。我来给你几个具体的解决建议：

核心问题分析 #

你当前的代码里同时做了三件冲突的事：用@HostBinding('disabled')绑定属性、直接设置this.el.nativeElement.disabled = true，还手动调用变更检测。这种混合操作会打乱Angular的变更检测流程，而且mat-button是通过自身的disabled输入属性来触发样式和类的更新，直接修改原生DOM属性并不会通知组件内部状态变化，所以才会出现DOM有disabled属性但样式没跟上的情况。

具体修正步骤 #

1. 移除原生DOM属性操作和手动变更检测 #

删掉this.el.nativeElement.disabled = true和setTimeout里的变更检测调用——Angular的变更检测机制会自动处理@HostBinding的属性更新，手动调用反而可能造成不必要的干扰。

2. 简化disabled绑定 #

你的@Input() @HostBinding('disabled')是多余的，因为这个disabled属性是由指令内部逻辑控制，不需要外部传入。直接保留@HostBinding即可。

3. 用Angular友好的方式控制元素显示（针对default分支） #

直接调用this.el.nativeElement.remove()可能会导致内存泄漏，因为Angular可能还持有该元素的引用。建议用HostBinding控制样式隐藏，或者注入ViewContainerRef来安全移除元素。

修正后的指令代码 #

import { Directive, ElementRef, HostBinding, Input, OnInit } from '@angular/core';

@Directive({ selector: '[myCustomDirective]' })
export class MyCustomDirective implements OnInit {
  @Input() myCustomDirective: string;
  // 仅用HostBinding绑定disabled属性，由指令内部控制
  @HostBinding('disabled') public disabled = false;
  // 用HostBinding控制元素显示，替代直接remove
  @HostBinding('style.display') private displayStyle = 'inline-block';

  constructor(private el: ElementRef) {}

  ngOnInit() {
    switch (this.myCustomDirective) {
      case 'mode1':
        this.disabled = true;
        break;
      default:
        this.displayStyle = 'none';
        // 如果需要完全移除元素，可以用下面的方式（需要注入ViewContainerRef）
        // import { ViewContainerRef } from '@angular/core';
        // constructor(private vcr: ViewContainerRef) {}
        // this.vcr.clear();
        break;
    }
  }
}

为什么这样能解决问题？ #

当你通过@HostBinding('disabled')设置disabled为true时，Angular会正确地将这个状态传递给mat-button的disabled输入属性，触发组件内部的状态更新逻辑——包括添加mat-button-disabled类、应用禁用样式，同时原生DOM的disabled属性也会被同步设置，这样就能保证样式和功能的一致性了。

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