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仍处于测试版本，我想知道我的代码中是否存在某些问题，或者我是否只需要在下一版本的框架中等待该组件的改进。

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>

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

在Angular Material 2中实现嵌套菜单

1 个答案: