MatMenu与[matMenuTriggerFor]按钮分属不同组件的关联实现咨询

这个报错的核心原因很明确：你在app-save-document组件内部定义的#saveMenu模板变量，属于子组件的私有模板作用域，父组件根本无法直接访问到它，所以[matMenuTriggerFor]找不到对应的MatMenu实例。

下面给你两种简单可行的解决方案：

方案一：子组件暴露MatMenu实例给父组件 #

这是最直接的方式，通过@ViewChild在子组件中获取菜单实例，然后把它暴露为公共属性，让父组件可以通过模板引用变量访问。

步骤1：修改子组件（app-save-document）的TS文件 #

import { Component, ViewChild } from '@angular/core';
import { MatMenu } from '@angular/material/menu';

@Component({
  selector: 'app-save-document',
  templateUrl: './save-document.component.html',
  styleUrls: ['./save-document.component.css']
})
export class SaveDocumentComponent {
  // 通过ViewChild获取内部的MatMenu实例并暴露为公共属性
  @ViewChild('saveMenu') public saveMenu!: MatMenu;
}

步骤2：修改父组件的模板 #

给子组件添加一个模板引用变量（比如#saveDoc），然后把按钮的[matMenuTriggerFor]绑定到子组件暴露的saveMenu属性上：

<!-- 给子组件加模板引用变量 -->
<app-save-document #saveDoc></app-save-document>

<!-- 绑定子组件暴露的菜单实例 -->
<button mat-icon-button [matMenuTriggerFor]="saveDoc.saveMenu">
  <mat-icon>save</mat-icon>
</button>

方案二：将菜单触发器移到子组件内部（可选） #

如果业务允许，你也可以把触发按钮直接放到app-save-document组件里，这样菜单和触发器在同一个组件作用域内，就不会有跨组件访问的问题了。

比如子组件模板：

<button mat-icon-button [matMenuTriggerFor]="saveMenu">
  <mat-icon>save</mat-icon>
</button>

<mat-menu #saveMenu="matMenu">
  <!-- 菜单内容 -->
  <button mat-menu-item>保存</button>
  <button mat-menu-item>另存为</button>
</mat-menu>

然后父组件只需要直接使用子组件即可：

<app-save-document></app-save-document>

这种方式更符合组件封装的原则，如果触发按钮和菜单的关联度很高，推荐使用这种方案。

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