Question

In documentation of Angular Material有很酷的功能。带有可扩展/折叠子类别的菜单。

是否可以使用某些组件创建它？还是我必须从头开始做？或者，也许您可以建议我一些节省时间的包裹。

Answer 1

我试图通过辅助导航自己实现这一目标。也许可以为您节省一些时间。

导航项目遵循一个简单的界面：

interface NavItem {
displayName: string;
disabled?: boolean;
iconName: string;
route?: string;
children?: NavItem[];}

然后在component.html中，主要思想是递归添加导航项（* ngFor）。对每个类别使用手风琴，然后使用另一个* ngFor来获取子项：

<mat-nav-list>
<span *ngFor="let item of menu">
  <span *ngIf="item.children && item.children.length > 0">
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            <!-- Cabeceras del submenu -->
            <div fxLayout="row" fxLayoutAlign="space-between center" > 
              <mat-icon>{{item.iconName}}</mat-icon>
              {{item.displayName}}
            </div>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <span *ngFor="let child of item.children">
          <mat-list-item routerLink="[child.route]">
            <!-- Entradas de cada submenú  -->
            <div fxLayout="row" fxLayoutAlign="space-between center" > 
              <mat-icon>{{child.iconName}}</mat-icon>
              {{child.displayName}}
            </div>
          </mat-list-item>
        </span>
      </mat-expansion-panel>
    </mat-accordion>
  </span>
  <span *ngIf="!item.children || item.children.length === 0">
    <mat-list-item routerLink="[item.route]">
      <!-- Entradas principales -->
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <mat-icon>{{item.iconName}}</mat-icon>
        {{item.displayName}}
      </div>
    </mat-list-item>
  </span>
</span>

看看：https://stackblitz.com/edit/angular-side-nav-dynamic-expansive-menu

Answer 2

将mat-expansion-panel放在mat-accordion中，将mat-nav-list放在扩展面板中。然后为新的导航手风琴创建全局样式。

StackzBlitz

<mat-accordion class="app-nav-accordion">
  <mat-expansion-panel class="mat-elevation-z0">
    <mat-expansion-panel-header>
      <mat-panel-title>Section Two</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-nav-list>
      <a mat-list-item>Item Three</a>
        <a mat-list-item>Item Four</a>
    </mat-nav-list>
  </mat-expansion-panel>
</mat-accordion>

.app-nav-accordion {
  .mat-expansion-panel {
    border-radius: 0px !important;
    box-shadow: none !important;

    &.mat-expansion-panel-spacing {
      margin: 0px;
    }

    .mat-expansion-panel-body {
      padding: 0px;
    }

    .mat-expansion-panel-header {
      height: 40px;
      padding: 0px 24px 0px 16px;
    }

    .mat-expansion-panel-header-title {
      color: rgba(0,0,0,0.54);
      font-size: 14px;
      font-weight: 500;
    }
  }
}

Answer 3

使用mat-expansion-panel是一个好的开始。默认示例使用手风琴只有一个扩展面板，您可以找到一个示例如何同时here扩展多个面板：

1-您应该删除手风琴以启用多个扩展   面板。

2-使用扩展参数可以同时更改多个状态   时间。

如何使用Angular Material创建折叠菜单？

3 个答案: