Breadcrumb无法正常工作的角度和材质多级菜单
Breadcrumb无法正常工作的角度和材质多级菜单
提问于 2018-07-02 17:29:46
我正在使用angular 6和angular material 6。在这里我尝试创建带有面包屑的多级菜单。我已经正确地处理了多级菜单，但无法使用选定的面包屑导航菜单。当我单击所选的面包屑时，菜单没有得到适当的组织。
我的演示链接：stackblitz link here
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-02 18:39:34
@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>Stack Overflow用户
发布于 2018-08-17 00:18:01
@Krishna Rathore非常感谢您的解决方案。我只是改变了几件事：
- 使用breadcrumbs;
- also sidenav和material nav list；
- 图标用作字体图标，可以使用令人敬畏的字体图标。
这是派生的stackblitz link。
我想我应该在这里发帖，给你学分，并帮助任何人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51132953
复制相关文章
相似问题
腾讯云开发者
