自定义指令与mat-menu-item指令冲突，执行顺序或为问题根源

这个问题的核心在于mat-menu-item（即MatMenuItem指令）本身会独立维护按钮的禁用状态——它并不会直接依赖DOM的disabled属性值，而是通过自身的disabled实例属性来控制UI状态。你之前直接操作DOM属性或用@HostBinding设置属性的方式，会被MatMenuItem后续的内部逻辑覆盖，所以才会失效。

下面是最直接有效的解决方案：

方案：注入MatMenuItem实例并直接控制其disabled属性 #

在你的自定义指令中，直接注入MatMenuItem的实例，然后通过修改这个实例的disabled属性来实现禁用，这样就能和mat-menu-item的内部逻辑协同工作，不会被覆盖。

修改后的自定义指令代码：

import { Directive, OnInit } from '@angular/core';
import { MatMenuItem } from '@angular/material/menu'; // 导入MatMenuItem

@Directive({ selector: '[myCustomDirective]' })
export class MyCustomDirective implements OnInit {
  // 注入MatMenuItem实例
  constructor(private matMenuItem: MatMenuItem) {}

  ngOnInit() {
    // 设置MatMenuItem的disabled属性
    this.matMenuItem.disabled = true;
    // 这里可以添加你的其他逻辑，比如根据条件动态设置禁用状态
    // 示例：this.matMenuItem.disabled = someCondition ? true : false;
  }
}

为什么之前的方法失效？ #

• MatMenuItem指令内部会监听自身disabled属性的变化，然后主动更新DOM元素的状态。你之前直接操作DOM的disabled属性，只是临时修改了DOM，但MatMenuItem的内部状态并没有同步，后续的变更检测或组件逻辑会把DOM属性改回去。
• Angular（区别于AngularJS）没有指令优先级的设置，所以靠调整指令顺序无法解决这个问题；setTimeout也无效，因为MatMenuItem的状态管理是持续性的，不是一次性初始化就结束。

额外提示 #

如果需要动态控制禁用状态（比如根据组件数据变化），你可以在指令中添加输入属性，然后通过ngOnChanges来同步更新MatMenuItem的disabled属性：

import { Directive, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { MatMenuItem } from '@angular/material/menu';

@Directive({ selector: '[myCustomDirective]' })
export class MyCustomDirective implements OnInit, OnChanges {
  @Input() shouldDisable = false;

  constructor(private matMenuItem: MatMenuItem) {}

  ngOnInit() {
    this.updateDisabledState();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['shouldDisable']) {
      this.updateDisabledState();
    }
  }

  private updateDisabledState() {
    this.matMenuItem.disabled = this.shouldDisable;
  }
}

使用时就可以动态传值：

<button mat-menu-item myCustomDirective [shouldDisable]="someComponentFlag"> Button Number 1 </button>

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