带有面包屑的角度和材质多级菜单无法正常工作答案

【问题标题】：Angular and Material Multi-level Menu with Breadcrumb not working properly带有面包屑的角度和材质多级菜单无法正常工作
【发布时间】：2018-07-02 09:29:45
【问题描述】：

我正在使用 angular 6 和 angular material 6。这里我正在尝试使用面包屑创建多级菜单。我已经正确使用了多级菜单，但无法使用选定的面包屑导航菜单。当我点击选定的面包屑时，菜单没有得到适当的组织。

我的演示链接：stackblitz link here

【问题讨论】：

标签： angular angular-material angular6 breadcrumbs angular-material-6

【解决方案1】：

@hi Monir tuhin

你可以试试这个解决方案。

我在 Stackblitz 上创建了一个演示。

组件.ts

breadCrumb(menu, index) {
    console.log('sub breadCrumb');
    this.menuHeader.splice(index + 1, this.menuHeader.length - 1);
    if (menu[index] && menu[index].items && menu[index].items.length) {
      this.appitemsTravel = menu[index].items;
    }
}

组件.html

<mat-toolbar color="primary" style="height: 45px; font-size: 16px; font-weight: bold; color: #E6E8EA">
    <span><a  mat-button (click)="breadCrumbMain()" style="color: white;">Main</a></span>
    <span *ngFor="let m of menuHeader; let indx = index" style="color: white;">
        <a  mat-button (click)="breadCrumb(menuHeader, indx)" >{{m.label}}
        <mat-icon fxFlex="10">{{m.icon}}</mat-icon></a>
    </span>
</mat-toolbar>

【讨论】：

再次感谢@Krishna Rathore。你做了伟大的工作。我已经尝试了很多次，但无法修复它。你节省了我很多时间。

【解决方案2】：

@Krishna Rathore 非常感谢您的解决方案。我只是改变了一些东西：

使用了材质侧导航和材质导航列表；
图标作为面包屑；
也可以使用字体很棒的图标。

这是分叉的stackblitz link。

我想我应该在这里发帖给你功劳并帮助任何出现的人。

【讨论】：