我正在尝试在基于 Angular 7 的应用程序中实现面包屑。
下面提到了包含面包屑组件的根组件的 HTML 模板(面包屑在路由器导出之外)
<app-layout>
<div>
<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>
</div>
</app-layout>
面包屑组件 ts 文件
ngOnInit() {
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((router) => {
let snapshot = this.router.routerState.snapshot;
this.breadcrumbs = [];
let url = snapshot.url;
let routeData: Data = snapshot.root.data;
let label = routeData['breadcrumb'];
let params = snapshot.root.params;
this.breadcrumbs.push({
url: url,
label: label,
params: params
});
});
面包屑组件html文件
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
<li *ngFor='let breadcrumb of breadcrumbs'>
<a [routerLink]='[breadcrumb.url, breadcrumb.params]' routerLinkActive='active'>{{ breadcrumb.label }}</a>
</li>
</ol>
</nav>
路由定义如下
const routes: Routes = [
{ path: 'folders', component: FolderManagementComponent, data: { breadcrumb: 'Home' } },
{ path: 'folders/list-documents', component: ListDocumentsComponent, data: { breadcrumb: 'Documents' } },
{ path: '', redirectTo: '/folders', pathMatch: 'full', data: { breadcrumb: 'Home' }}
];
但我没有得到数据和参数
最佳答案
使用以下代码更新 Breadcrumb 组件 ts 文件中的路由器订阅逻辑。
ngOnInit() {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.pipe(map(() => this.activatedRoute))
.pipe(map((route) => {
while (route.firstChild) { route = route.firstChild; }
return route;
}))
.pipe(filter(route => route.outlet === PRIMARY_OUTLET))
.subscribe(route => {
let snapshot = this.router.routerState.snapshot;
this.breadcrumbs = [];
let url = snapshot.url;
let routeData = route.snapshot.data;
console.log(routeData);
let label = routeData['breadcrumb'];
let params = snapshot.root.params;
this.breadcrumbs.push({
url: url,
label: label,
params: params
});
});
}
工作 stackblitz 链接:https://stackblitz.com/edit/breadcrumb-in-angular-7
最近我实现了ng-dynamic-breadcrumb , ng7-dynamic-breadcrumb , ng7-bootstrap-breadcrumb和 ng7-mat-breadcrumb Angular 面包屑模块。请检查这些模块,我希望这对动态面包屑有帮助。
关于angular - 如何在 Angular 7 中实现面包屑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53552615/