angular - 动态设置 [matMenuTriggerFor]

Question

我正在尝试动态设置 matMenuTriggerFor]="getMenuName(menuItem)" ，这就是我正在尝试的:

<button mat-icon-button  [matMenuTriggerFor]="getMenuName(menuItem)">
   <mat-icon>{{ menuItem.icon }}</mat-icon>
</button>

<mat-menu #navmenu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voice mail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

getMenuName(menuItem) {
    console.log(menuItem);
    return 'navmenu';
}

它显示正常，但是当我单击按钮时，它给出错误core.js:6150 ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined。

请帮助我该怎么做。

Answer 1

你的getMenuName()只是返回一个字符串。这不是 [matMenuTriggerFor] 指令所需的参数。您需要将 MatMenu 的引用设置为 matMenuTriggerFor 指令的值。

在您的代码中，我可以看到您已将 matMenu 导出到名为 navmenu 的模板变量中。

现在要动态附加此菜单及其触发器，您需要使用 @ViewChild 装饰器在组件类中引用此 navmanu。

因此，在您的组件中声明一个变量，如下所示。

@ViewChild('navmenu', {static: true}) navMenu:MatMenu;

请注意，我们在这里使用了 static: ture 属性。因为我们希望在模板渲染时动态访问 MatMenu。在这里阅读更多相关信息:https://stackoverflow.com/a/56359612/1160236

现在从您的 getMenuName() 方法返回此 navMenu。

getMenuName(menuItem) {
    console.log(menuItem);
    return this.navMenu;
}

注意。您可以将此方法重命名为 getMenu()，因为我们返回整个菜单对象，而不仅仅是其名称。

请在此处查看 stackblitz 演示:https://stackblitz.com/edit/angular-qhzq8v?file=src/app/menu-overview-example.ts