Question

我想用Angular Material创建一个“动态嵌套菜单”。
我创建了这个，
它可以工作，但是有三个问题：
1-丑陋的:(
2-仅3层
3-它不是动态的（我必须更新html并再添加一层）
idk再说些什么：看来您的帖子大部分是代码；请添加更多详细信息。
这是我的菜单HTML：

<button mat-icon-button [matMenuTriggerFor]="rootMenu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <!-- [Start] Root Menu -->
  <mat-menu #rootMenu="matMenu">
    <ng-container *ngFor="let cat of categories">
      <div *ngIf="cat.children">
        <div *ngIf="cat.children.length > 0">
          <button mat-menu-item [matMenuTriggerFor]="subMenu">{{cat.name}}</button>
        </div>
        <div *ngIf="!cat.children.length">
          <button mat-menu-item>{{cat.name}}</button>
        </div>
      </div>

      <!-- [Start] Sub Menu -->
      <mat-menu #subMenu="matMenu">
        <ng-container *ngFor="let child of cat.children">
          <div *ngIf="child.children">
            <div *ngIf="child.children.length > 0">
              <button mat-menu-item [matMenuTriggerFor]="subChildMenu"> {{child.name}}</button>
            </div>
            <div *ngIf="!child.children.length">
              <button mat-menu-item>{{child.name}}</button>
            </div>
          </div>

          <!-- [Start] SubChild Menu -->
          <mat-menu #subChildMenu="matMenu">
            <ng-container *ngFor="let zxc of child.children">
              <button mat-menu-item> {{zxc.name}} </button>
            </ng-container>
          </mat-menu>
          <!-- [End] SubChild Menu -->

        </ng-container>
      </mat-menu>
      <!-- [End] Sub Menu -->

    </ng-container>
  </mat-menu>
  <!-- [End] Root Menu -->

这是我的数据（我正在使用graphql）

{
  "data": {
    "categories": [
      {
        "name": "App",
        "child": [
          {
            "name": "Power",
            "child": [
              {
                "name": "Light",
                "child": []
              },
              {
                "name": "Cable",
                "child": []
              },
              {
                "name": "Others",
                "child": [
                  {
                    "name": "Alerts"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

这是我的数据树

└───App
    └───Power
        ├───Cable
        ├───Light
        └───Others
            └───Alerts

非常感谢

Answer 1

我建议使用带有棱角分明材质的可怕tree component，它看起来很酷，而且很动态！而且，代码非常灵活。请享用！

动态嵌套菜单-角材料

1 个答案: