Question

我正在寻找Angular Material2中对侧栏内嵌套菜单的支持。顶级通常默认关闭，打开顶级会暴露嵌套的菜单项。

我认为这是一个有意义的起点，但子导航项在父项之外呈现（不良）：

<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组件。

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

<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>，<button md-icon-button>和自定义动画来实现此目的。

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

2 个答案: