Angular Material CDK上下文菜单组件@Output无法触发求助

问题根源 #

CDK上下文菜单通过Overlay容器动态渲染，其DOM节点不属于原父组件的DOM树，默认使用根注入器，导致菜单模板中的事件绑定无法正确关联父组件的方法上下文——这就是你直接绑定(setUserItem)或通过cdkContextMenuTriggerData传递方法均无效的核心原因。

解决方案一：通过ViewChild订阅组件事件（推荐） #

直接在父组件中获取自定义菜单组件实例，手动订阅其setUserItem事件，绕开上下文丢失问题：

父组件模板修改 #

移除模板中的事件绑定，仅保留Input传递：

<span
  class="tag-item"
  [ngClass]="tag.userTagCategory"
  (click)="displayTagInfo(tag)"
  [cdkContextMenuTriggerFor]="contextMenu"
  [cdkContextMenuTriggerData]="{ tag }"
>   
  {{ tag.name }}
  <span class="tag-weight">({{ tag.weight }})</span>
</span>

<ng-template #contextMenu let-item="tag">
  <app-user-item-context-menu
    [item]="{ id: item.id, selectedCategory: item.userTagCategory }"
  />
</ng-template>

父组件TS代码 #

通过ViewChild获取菜单触发器，监听菜单打开事件，获取自定义组件实例并订阅事件：

import { ViewChild, Component, AfterViewInit } from '@angular/core';
import { CdkContextMenuTrigger } from '@angular/cdk/menu';
import { UserItemContextMenuComponent } from './path-to-your-component/user-item-context-menu.component';
import { UserCategory } from './path-to-your-types/user-category';

@Component({
  selector: 'app-your-parent-component',
  templateUrl: './your-parent-component.component.html'
})
export class YourParentComponent implements AfterViewInit {
  @ViewChild(CdkContextMenuTrigger) trigger!: CdkContextMenuTrigger;

  ngAfterViewInit(): void {
    this.trigger.menuOpened.subscribe(() => {
      // 获取自定义菜单组件实例
      const menuComponent = this.trigger.menu?.instance?.menuItems.first?.instance as UserItemContextMenuComponent;
      if (menuComponent) {
        // 订阅事件并绑定父组件方法
        menuComponent.setUserItem.subscribe(event => {
          this.onSetUserTag(event.id, event.selectedCategory);
        });
      }
    });
  }

  onSetUserTag(id: string, selectedCategory?: UserCategory): void {
    // 你的业务逻辑处理
    console.log('触发事件：', id, selectedCategory);
  }
}

解决方案二：传递父组件注入器 #

通过cdkContextMenuTriggerConfig传入父组件的注入器，让菜单模板能正确解析父组件方法上下文：

父组件TS代码 #

注入自身Injector，提供菜单配置：

import { Component, Injector } from '@angular/core';
import { ContextMenuConfig } from '@angular/cdk/menu';
import { UserCategory } from './path-to-your-types/user-category';

@Component({
  selector: 'app-your-parent-component',
  templateUrl: './your-parent-component.component.html'
})
export class YourParentComponent {
  constructor(private injector: Injector) {}

  // 返回菜单配置，传入父组件注入器
  getMenuConfig(): ContextMenuConfig {
    return { injector: this.injector };
  }

  onSetUserTag(id: string, selectedCategory?: UserCategory): void {
    // 你的业务逻辑处理
    console.log('触发事件：', id, selectedCategory);
  }
}

父组件模板修改 #

绑定菜单配置，恢复事件绑定：

<span
  class="tag-item"
  [ngClass]="tag.userTagCategory"
  (click)="displayTagInfo(tag)"
  [cdkContextMenuTriggerFor]="contextMenu"
  [cdkContextMenuTriggerData]="{ tag }"
  [cdkContextMenuTriggerConfig]="getMenuConfig()"
>   
  {{ tag.name }}
  <span class="tag-weight">({{ tag.weight }})</span>
</span>

<ng-template #contextMenu let-item="tag">
  <app-user-item-context-menu
    [item]="{ id: item.id, selectedCategory: item.userTagCategory }"
    (setUserItem)="onSetUserTag($event.id, $event.selectedCategory)"
  />
</ng-template>

为什么之前的尝试无效？ #

• 直接模板绑定事件：菜单在Overlay容器中渲染，属于独立视图，模板中的onSetUserTag无法找到父组件的方法上下文。
• 通过cdkContextMenuTriggerData传递方法：方法作为数据传递时会丢失this指向，调用时this不再指向父组件，导致方法执行失败。

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