如何使用Angular Material2创建嵌套的可折叠菜单？

Question

我正在寻找Angular Material2中支持在边栏内嵌套菜单的支持。顶级菜单通常默认关闭，打开顶级菜单将显示嵌套菜单项。

我认为这是一个合理的起点，但是子导航项的呈现效果很差，会呈现在父项之外。 plnkr

<md-sidenav-container class="my-container">
  <md-sidenav #sidenav class="my-sidenav">
    <md-list>
        <md-list-item>
          <h3 md-line> First Parent </h3>
          <md-nav-list>
            <a md-list-item href="#">First Child</a>
            <a md-list-item href="#">Second Child</a>
            <a md-list-item href="#">Third Child</a>
          </md-nav-list>
        </md-list-item>
        <md-list-item>
          <h3 md-line> Second Parent </h3>
          <md-nav-list>
            <a md-list-item href="#">First Child</a>
            <a md-list-item href="#">Second Child</a>
          </md-nav-list>
        </md-list-item>
    </md-list>
  </md-sidenav>  
  <div class="my-container">
    <button md-button (click)="sidenav.open()">Open</button>
  </div>
</md-sidenav-container>

有人使用@angular/material创建过这种侧边栏菜单吗？

- Stuart

Answer 1

我知道这是一个老问题，但是对于像我一样在这个页面上寻找同样事情答案的其他人，以下是我如何使用当前版本的Angular Material（6.4.6）来解决它的方法，一旦你正确设置了CSS样式，它就非常好用。

请注意，仍然没有官方支持此功能，并且您必须自己设置它，可以通过多种方式完成，但我选择仅使用Angular Material组件。

以下是使用对象作为导航链接的示例标记，其中包含一些注释：

<mat-sidenav-container>
  <mat-sidenav #sidenav
    class="sidenav"
    [mode]="mobileQuery.matches ? 'over' : 'side'"
    [opened]="mobileQuery.matches ? false : true">
    <mat-nav-list>
      <!-- wrap all the nav items in an accordion panel -->
      <mat-accordion [displayMode]="flat">
        <div *ngFor="let navItem of navList">

          <!-- use a simple div for an item that has no children,
            match up the styling to the expansion panel styles -->
          <div class="nav-head" *ngIf="navItem.pages.length === 0">
            <a class="nav-link"
              [routerLink]="navItem.link"
              routerLinkActive="selected"
              (click)="closeSidenav()">
              <mat-icon>{{navItem.icon}}</mat-icon>
              <span class="nav-link-text">{{navItem.heading}}</span>
            </a>
          </div>

          <!-- use expansion panel for heading item with sub page links -->
          <mat-expansion-panel *ngIf="navItem.pages.length > 0"
            class="mat-elevation-z0">
            <mat-expansion-panel-header class="nav-head" [expandedHeight]="'48px'">
              <mat-panel-title class="nav-link">
                <mat-icon>{{navItem.icon}}</mat-icon>
                <span class="nav-link-text">{{navItem.heading}}</span>
              </mat-panel-title>
            </mat-expansion-panel-header>
      
            <div class="nav-section">
              <!-- loop through all your sub pages inside the expansion panel content -->
              <div *ngFor="let navPage of navItem.pages"
                class="nav-item">
                <a class="nav-link"
                  [routerLink]="navPage.link"
                  routerLinkActive="selected"
                  (click)="closeSidenav()">{{navPage.title}}</a>
              </div>
            </div>
          </mat-expansion-panel>
        </div>
      </mat-accordion>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

编辑：为了回答一些额外的问题，mobileQuery来自于Angular Material CDK，它为在组件内检测移动断点添加了一些帮助程序。请参见这里：Angular Material CDK Layout

此外，在这种情况下，我的组件文件实际上并没有做任何事情，除了从服务中提取正确的导航对象以显示，但这是我设置对象的示例（当然，它们可以是您需要的任何内容）。

[
  {
    heading: 'Dashboard',
    icon: 'dashboard',
    link: '/dashboard',
    pages: []
  },
  {
    heading: 'Main Heading',
    icon: 'settings',
    link: '/settings',
    pages: [
      {
        title: 'Subpage',
        link: '/settings/advanced',
        icon: ''
      }
    ]
  }
]

- Aaron Hazelton

---

顺便提一下，甚至可以与routerLinkActive指令一起使用，以显示所选页面并从包含所选路由的面板打开导航！ - Aaron Hazelton

介意提供 TypeScript 文件吗？mobileQuery 究竟是什么？ - SeaBiscuit

@SeaBiscuit在答案中添加了一些注释，包括我如何设置我的导航对象的示例。 - Aaron Hazelton

Answer 2

很遗憾，目前为止，材料设计库没有提供任何工具来实现您想要的功能。

一旦有了，您可以使用tree组件来实现您想要的功能。否则，您应该考虑自己构建一个。我自己也这样做了（不幸的是，在专有代码库中），我很乐意回答具体问题。我使用嵌套的<md-list>、<button md-icon-button>和自定义动画来实现。

- Berseker59