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

Question

在 Angular Material 的文档中有一个很酷的功能。带有可以展开/折叠的子类别的菜单。

是否可以使用某些组件创建它？还是我必须自己从头开始？或者，也许您可​​以向我推荐一些可以节省我时间的软件包。

Answer 1

我试图通过侧导航来实现这一目标。也许它可以为您节省一些时间。

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

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

然后在 component.html 中，主要思想是递归添加导航项 (*ngFor)。对每个类别使用 mat-accordions，然后使用另一个 *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

使用垫子扩展面板将是一个好的开始。默认示例使用手风琴只有一个展开面板，您可以在此处找到如何同时展开多个面板的示例：

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

2-使用扩展参数同时改变多个状态。