是否有一种方法可以实现基于导航历史的面包屑,而不是基于常规路线路径的面包屑。
示例 路线: 主页-HChild1-HChild1.1 主页-HChild2-HChild2.1
如果用户从主页导航至HChild2.1,则面包屑应为 主页| HChild2.1
而不是 主页| HChild2 | HChild2.1
然后,如果用户从HChild2.1导航到HChild1.1,则面包屑应为 主页| HChild2.1 | HChild1.1
而不是 主页| HChild1.1 | HChild1.1
我所拥有的是基于普通路由路径的面包屑,因为我只能导航到Paranet组件,而不能导航到上一个组件,所以这没有用。
谢谢
答案 0 :(得分:0)
使用面包屑组件填充导航结束路线中的最后一条路线。
路线必须具有面包屑数据
//Home route
{
path: '',
component: HomeComponent,
data: {breadcrumb:'Home'},
}
这是我制作的面包屑成分。
export interface BreadCrumb {
label: string;
url: string;
};
@Component({
selector: 'breadcrumb',
template: `<span *ngFor="let breadcrumb of breadcrumbs" >
<a [routerLink]="breadcrumb.url">
{{ breadcrumb.label }}
</a>|
</span>`
})
export class BreadCrumbComponent {
private history = [];
breadcrumbs: BreadCrumb[] = [];
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) { }
public ngOnInit(): void {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd), distinctUntilChanged(),map(() => {
return this.buildBreadCrumb(this.activatedRoute.root)
}
))
.subscribe(event => {
this.breadcrumbs.push(event);
console.log(this.breadcrumbs)
});
}
buildBreadCrumb(route: ActivatedRoute, url: string = ''): BreadCrumb {
const label = route.routeConfig ? route.routeConfig.data['breadcrumb'] : 'Home';
const path = route.routeConfig ? `/${route.routeConfig.path}` : '';
const nextUrl = `${url}${path}`;
const breadcrumb = {
label: label,
url: nextUrl
};
if (route.firstChild) {
return this.buildBreadCrumb(route.firstChild, nextUrl);
}
return breadcrumb;
}
}