OnPush组件中mat-menu调用detectChanges无法更新视图的原因

核心原因是MatMenu的DOM渲染上下文和你的组件完全分离：

• MatMenu的内容会被Angular Material渲染到页面全局的Overlay容器中，不属于你的DropDownComponent的DOM子树。
• 投影到<mat-menu>里的内容，其变更检测的上下文是MatMenu组件本身，而非你的DropDownComponent。

在你的代码逻辑里：

1. 调用this.cdr.detectChanges()只会触发DropDownComponent及其直接子节点的变更检测，但MatMenu的内容不在这个检测范围内。
2. $event.stopPropagation()阻止了点击事件冒泡，而MatMenu原本会通过事件冒泡触发自身的变更检测流程——这直接导致MatMenu组件没机会更新视图。

当你用Observable配合*ngIf时：

• AsyncPipe会自动订阅Observable，每次数据流更新时，Angular会标记关联的视图（即MatMenu里的内容）为需要变更检测。
• *ngIf的切换会强制重新渲染对应的DOM片段，此时会重新读取你组件的fooClass/barClass getter，从而拿到最新的属性值。

方案1：触发MatMenu组件的变更检测 #

通过ViewChild获取MatMenu实例，直接触发它的变更检测：

// dropdown.component.ts
import { MatMenu } from '@angular/material/menu';

@ViewChild('menu') menu: MatMenu;

public toggleFooBar($event: Event) {
    $event.stopPropagation();
    this.foobar = this.foobar === 1 ? 2 : 1;
    // 触发MatMenu的变更检测
    (this.menu._changeDetectorRef as ChangeDetectorRef).detectChanges();
}

注意：_changeDetectorRef是Angular Material的私有API，版本更新可能会有变动，使用时需谨慎。

方案2：用BehaviorSubject+AsyncPipe替代直接属性 #

将foobar改为Observable，模板中用AsyncPipe自动处理变更检测，符合OnPush最佳实践：

// dropdown.component.ts
import { BehaviorSubject } from 'rxjs';

private foobarSubject = new BehaviorSubject<number>(1);
public foobar$ = this.foobarSubject.asObservable();

public get fooClass() { return this.foobarSubject.value === 1 ? '' : 'visible'; }
public get barClass() { return this.foobarSubject.value === 2 ? '' : 'visible'; }

public toggleFooBar($event: Event) {
    $event.stopPropagation();
    const newValue = this.foobarSubject.value === 1 ? 2 : 1;
    this.foobarSubject.next(newValue);
}

方案3：避免阻止事件冒泡，手动控制菜单状态 #

不依赖私有API，通过MatMenuTrigger的API恢复菜单状态：

public toggleFooBar($event: Event) {
    // 先记录当前菜单状态
    const wasOpen = this.menuTrigger.menuOpen;
    this.foobar = this.foobar === 1 ? 2 : 1;
    this.cdr.detectChanges();
    // 如果之前菜单是打开状态，重新打开
    if (wasOpen) {
        this.menuTrigger.openMenu();
    }
}

这种方式让MatMenu正常触发变更检测，再手动恢复菜单的打开状态。

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