Question

我正在使用角度6和角度材质6。在这里，我尝试使用面包屑创建多级菜单。我已经使用了正确的多级菜单，但是无法使用选定的面包屑导航菜单。当我单击所选的面包屑时，菜单将无法正确组织。

Answer 1

@hi Monir tuhin

您可以尝试此解决方案。

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

Component.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;
    }
}

Component.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>

Answer 2

@Krishna Rathore非常感谢您的解决方案。我只是改变了几件事：

使用了物料清单和物料清单；
图标作为面包屑；
还可以使用超棒的字体图标。

这是分叉的stackblitz link。

我认为我应该在这里发布以给您功劳，并帮助随之而来的任何人。

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

2 个答案: