如何使用 Angular 5 创建带有子菜单的菜单

Question

我使用的是 Angular 5 材质，并且有一个包含菜单和子菜单数据的 JSON 对象。我该怎么办？我可以使用 type= link 或 sub 显示项目，但我不知道如何向孩子们显示。我想在单击父项时显示子项。我用mat-nav-list和mat-list-item向他们展示，但我不知道如何向孩子们展示。

这是对象：

    import { Injectable } from '@angular/core';

export interface ChildrenItems {
    state: string;
    name: string;
    type?: string;
  }

export interface Menu {
    state: string;
    name: string;
    type: string;
    icon: string;
    children?: ChildrenItems[];
}

const MENUITEMS = [
    {
        state: 'dashboard',
        name: 'Dashboard',
        type: 'link',
        icon: 'dashboard'
    },
    {
        state: 'setting',
        name: 'Settings',
        type: 'sub',
        icon: 'settings',
        children: [
            {
                state: 'station_management',
                name: 'Station Management',
                type: 'parent',
                grand_children: [
                    { state: 'station', name: 'Station' },
                    { state: 'shifts_work', name: 'Shifts Work' },
                    { state: 'fuel_price', name: 'Fule Price' },
                    { state: 'tank_management', name: 'Tank Management' }
                ]
            }
        ]
    }
];

@Injectable()
export class MenuItems {
    getMenuitem(): Menu[] {
        return MENUITEMS;
    }
}

Answer 1

您所需要做的就是将子菜单放置在容器 DIV 中，并在单击父菜单图标时展开或折叠容器。这是一个简单的例子 - 您可能想要以不同的方式实现事物，但想法是相同的。

showSubmenu: boolean = false;

<mat-list>
  <mat-list-item>
    Parent Menu
    <button mat-button mat-icon-button (click)="showSubmenu = !showSubmenu">
      <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}">expand_more</mat-icon>
    </button>
  </mat-list-item>
  <div class="submenu" [ngClass]="{'expanded' : showSubmenu}">
    <mat-list-item>Submenu Item 1</mat-list-item>
    <mat-list-item>Submenu Item 2</mat-list-item>
    <mat-list-item>Submenu Item 3</mat-list-item>
  </div>
</mat-list>


.menu-button {
  transition: 300ms ease-in-out;
  transform: rotate(0deg);
}
.menu-button.rotated {
  transform: rotate(180deg);
}
.submenu {
  overflow-y: hidden;
  transition: 300ms ease-in-out;
  height: 0;
}
.submenu.expanded {
  height: 144px;
}