如何在父菜单中包含完整的垫子菜单？

Question

我们希望将一个大菜单（例如 material components docs 中的 Nested menu 示例）拆分为单独的较小组件。

例如在这个Stackblitz example 中，我们将鱼菜单移到了一个单独的组件中：fish-menu.component.ts：

import { Component } from "@angular/core";

@Component({
  selector: "fish-menu",
  template: `
    <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>

    <mat-menu #fish="matMenu">
      <button mat-menu-item>Baikal oilfish</button>
      <button mat-menu-item>Bala shark</button>
      <button mat-menu-item>Ballan wrasse</button>
      <button mat-menu-item>Bamboo shark</button>
      <button mat-menu-item>Banded killifish</button>
    </mat-menu>
  `
})
export class FishMenuComponent {}

并将其包含在parent menu 中，如下所示：

<button mat-button [matMenuTriggerFor]="animals">Animal index</button>

<mat-menu #animals="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <!-- our child-component does not work as expected -->
  <fish-menu></fish-menu>
  <!-- other children are okay -->
  <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
  <!-- etc. -->

但是当我们悬停菜单项时，包含的菜单无法按预期工作：

1. 鱼菜单没有打开（除非我们点击它）
2. 其他菜单未关闭（鱼菜单打开时）

注意
我们希望在子组件中包含完整菜单：即带有matMenuTriggerFor 的按钮和相关的mat-menu（因为同一个菜单应该包含在生产应用程序的多个位置）。并且父菜单并不总是相同的：即我们有许多不同的父菜单，它们由不同的子菜单组成。

我们如何才能使这项工作按预期进行？

Answer 1

我也遇到过这个问题，这是由于您的子组件与您的父组件没有相同的 matMenu 上下文。为了解决这个问题，我通过输入将我的子菜单对象传递给我的父级并动态构建它们。

如果您计划使用单个组件来显示您的 matMenuTriggerFor 按钮，我相信您的解决方案应该更简单。您可以将整个菜单放在一个组件中，并在多个其他组件中使用它。

我已经完成了您在此处描述的操作： https://stackblitz.com/edit/angular-me42ci-bbbnfz?file=src%2Fapp%2Fmenu-nested-example.html

---

编辑

我想出了一些可能对你有用的东西。您可以通过 ng-content 传入顶级菜单项：

<app-menu>
  <button mat-menu-item>Aliens</button>
</app-menu>

menu.component.ts：

  <mat-menu #animals="matMenu">
    <ng-content></ng-content>
    <button mat-menu-item [matMenuTriggerFor]="vertebrates">
      Vertebrates
    </button>
    <button mat-menu-item [matMenuTriggerFor]="invertebrates">
      Invertebrates
    </button>
  </mat-menu>

https://stackblitz.com/edit/angular-me42ci-bbbnfz?file=src%2Fapp%2Fmenu-nested-example.html