如何使用 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 创建过这种侧边栏菜单吗？

Answer 1

我知道这是一个老问题，但是对于其他来到此页面的人来说，就像我一样寻找相同的东西，这就是我如何使用当前版本的 Angular Material (6.4.6) 来处理它，一旦你正确处理 CSS 样式，效果很好。

请注意，这个功能目前还没有官方支持，你必须自己设置，这可以通过多种方式完成，但我选择只使用 Angular Material 组件。

这是带有一些 cmets 的示例标记，使用对象作为导航链接：

<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: ''
      }
    ]
  }
]

Answer 2

不幸的是，到目前为止，材料设计库没有提供任何工具来做你想做的事。

一旦它出来，你也许可以使用tree 组件来实现你想要的。否则，您应该自己构建一个。我自己已经这样做了（不幸的是，在专有代码库中），我很乐意帮助解决具体问题。我使用嵌套的<md-list>s、<button md-icon-button>s 和自定义动画来做到这一点。