我尝试使用 Angular 6 制作面包屑。文本可以工作,但链接无法正常工作。
我想做这个。
主页 > 仪表板 > 统计(有效。)
首页 -> xxx.com(有效。)
Dashborad -> xxx.com/dashboard(有效。)
统计 -> xxx.com/statistical(不起作用。)
因此,如果它是子组件链接则不起作用。
它需要是xxx.com/dashboard/statistical(正确)
我该怎么做?
breadcrumb.component.ts
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {
route: string;
breadcrumbList: Array<any>;
routeLinks: number;
count: number;
constructor(location: Location, router: Router) {
router.events.subscribe((val) => {
if (location.path() !== '') {
this.route = location.path();
this.breadcrumbList = this.route.split('/');
this.count = this.breadcrumbList.length;
} else {
this.route = 'Home';
}
});
}
ngOnInit() {}
}
breadcrumb.component.html
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<ng-container *ngIf="count == null">
<li class="breadcrumb-item"><i class="material-icons">home</i></li>
</ng-container>
<ng-container *ngIf="count != null">
<li class="breadcrumb-item"><a href="javascript:void(0)" [routerLink]=""><i class="material-icons">home</i></a></li>
</ng-container>
<ng-container *ngFor="let breadLink of breadcrumbList">
<li class="breadcrumb-item"><a href="javascript:void(0)" [routerLink]="breadcrumbList[2]">{{breadLink}}</a></li>
</ng-container>
</ol>
</nav>
您必须重建每个 url 链接,并使用先前的 url 前缀 -
this.breadcrumbList = this.route.split('/');
this.breadcrumbLinksList = [this.breadcrumbList[0]];
for(let i=1; i<=this.breadcrumbList.length; i++){
const link = this.breadcrumbLinksList[i-1] +'/'+ this.breadcrumbList[i]
this.breadcrumbLinksList.push(link)
}
在 html 中用作 -
<ng-container *ngFor="let breadcrumbLabel of breadcrumbList; let i=index">
<li class="breadcrumb-item">
<a [routerLink]="breadcrumbLinksList[i]">{{breadcrumbLabel}}</a>
</li>
</ng-container>
为了更详细地使用面包屑,我认为 xng-breadcrumb (https://github.com/udayvunnam/xng-breadcrumb) 涵盖了所有用例以及其他一些有用的功能。任何面包屑解决方案都必须处理
随时检查生产就绪的 Angular 应用程序中面包屑的使用情况https://xng-breadcrumb.netlify.com