有没有办法实现基于导航历史记录的面包屑而不是基于正常路线路径的面包屑。
例子
路线 :
主页 - 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 组件,而不能导航到前一个组件。
Thanks
使用面包屑组件填充导航结束路线中的最后一条路线。
路线必须有面包屑数据
//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;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)