在 Angular Material 2 中实现嵌套菜单

Question

在 Angular Material 的工具栏中实现嵌套菜单时遇到一些问题：

• 主菜单列表放置在触发它的按钮上，而不是 在它下面，如图the official documentation
• 没有任何内容表明菜单项包含子菜单列表（例如某种箭头）
• 当我实现子菜单列表时，菜单的主列表消失一次 单击子菜单，（您可以以我的代码示例为例，以小分辨率进行测试：单击“管理”菜单时，它显示产品和员工列表，但菜单的主列表包含“管理”项目消失）

这是我的实现：

<md-toolbar color="primary">
  <button md-button routerLink="/">
    <md-icon> home </md-icon>
    <span> Home </span>
  </button>

  <div fxLayout="row" fxShow="false" fxShow.gt-sm>
    <button md-button [mdMenuTriggerFor]="administration">
      <span> Manage </span>
    </button>
    <button md-button routerLink="/help">
      <md-icon> help_outline </md-icon>
      <span> Help </span>
    </button>
  </div>
  
  <button md-button [mdMenuTriggerFor]="menu" fxHide="false" fxHide.gt-sm>
    <md-icon> more_vert </md-icon>
  </button>
</md-toolbar>

<md-menu #administration="mdMenu">
  <button md-menu-item routerLink="/products">
    <span> Products </span>
  </button>
  <button md-menu-item routerLink="/staff">
    <span> Staff </span>
  </button>
</md-menu>

<md-menu xPosition="before" #menu="mdMenu">
  <button md-menu-item [mdMenuTriggerFor]="administration">
    <span> Manage </span>
  </button>
  <button md-menu-item routerLink="/help">
    <span> Help </span>
  </button>
</md-menu>

我正在寻找的行为在 AngularJS Material 的 the MenuBar component 中是原生的，并且由于 Angular Material 仍处于其 beta 版本，我想知道我的代码是否存在问题，或者我只需要等待在下一个版本的框架中改进这个组件。

Answer 1

好吧，我不确定你用的是什么，但我使用了https://teradata.github.io/covalent/#/components/expansion-panel，我想出了以下解决方案：

<md-nav-list td-sidenav-content>
    <td-expansion-panel md-list-item>
            <ng-template td-expansion-panel-header>
                <a md-list-item>
                    <md-icon md-list-avatar>settings</md-icon>
                    <h3 md-line> Nested menu </h3>
                </a>
                <md-divider></md-divider>
            </ng-template>

        <md-list class="bgc-blue-grey-50">
            <h3 md-subheader>Metadata</h3>
            <a md-list-item style="padding-left:20px;">
                <md-icon md-list-avatar>settings</md-icon>
                <h3 md-line> Nested Item </h3>
            </a>
        </md-list>

    </td-expansion-panel>

    <!-- Settings -->
        <a md-list-item>
            <md-icon md-list-avatar>settings</md-icon>
            <h3 md-line> Settings </h3>
        </a>
</md-nav-list>

编辑： 答案是在角材料处于可用状态之前发布的。最新的角度材质库带有一个结构非常漂亮的树组件。我建议现在使用它。