有没有办法在Angular 6中创建动态面包屑

本文介绍了有没有办法在Angular 6中创建动态面包屑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有带有面包屑的Angular 6应用程序，该应用程序来自路径中的数据.例如:

I have Angular 6 app with breadcrumbs which comes from the data in route. For example:

const routes: Routes = [ { path: "", component: RootComponent, children: [ { path: "", data: { breadcrumb: "products" }, children: [ { path: ":id", component: ProductComponent, data: { breadcrumb: "product" } }, { path: ":id/edit", component: ProductEditComponent, data: { breadcrumb: "edit" } } ] } ] }, ];

是否有办法从面包屑中的组件添加自定义信息?例如，代替 products>编辑以具有 products>三文鱼>编辑.我试图从ngOnInit函数中的组件向路由添加更多数据，但问题是调用该函数时数据尚未到达，因此数据尚未 undefined .

Is there a way to add custom information from the component in the breadcrumbs ? For example instead products > edit to have products > salmon > edit. I tried to add more data to the route from the component in ngOnInit function, but the problem is that the data hasn't arrived when the function is called, so the data is yet undefined.

我目前获取面包屑的逻辑类似于:

My current logic for getting the breadcrumbs is something like:

ngOnInit() { const ROUTE_DATA_BREADCRUMB: string = "breadcrumb"; //subscribe to the NavigationEnd event this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => { //set breadcrumbs let root: ActivatedRoute = this.activatedRoute.root; this.breadcrumbs = this.getBreadcrumbs(root); }); } /** * Returns array of IBreadcrumb objects that represent the breadcrumb * * @class DetailComponent * @method getBreadcrumbs * @param {ActivateRoute} route * @param {string} url * @param {IBreadcrumb[]} breadcrumbs */ private getBreadcrumbs(route: ActivatedRoute, url: string="", breadcrumbs: IBreadcrumb[]=[]): IBreadcrumb[] { const ROUTE_DATA_BREADCRUMB: string = "breadcrumb"; //get the child routes let children: ActivatedRoute[] = route.children; //return if there are no more children if (children.length === 0) { return breadcrumbs; } //iterate over each children for (let child of children) { //verify primary route if (child.outlet !== PRIMARY_OUTLET) { continue; } //verify the custom data property "breadcrumb" is specified on the route if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) { return this.getBreadcrumbs(child, url, breadcrumbs); } //get the route's URL segment let routeURL: string = child.snapshot.url.map(segment => segment.path).join("/"); //append route URL to URL url += `/${routeURL}`; //add breadcrumb let breadcrumb: IBreadcrumb = { label: child.snapshot.data[ROUTE_DATA_BREADCRUMB], params: child.snapshot.params, url: url }; breadcrumbs.push(breadcrumb); //recursive return this.getBreadcrumbs(child, url, breadcrumbs); } }

推荐答案

尝试在面包屑.ts中使用ngAfterViewInit.

Try to use ngAfterViewInit in your breadcrumb.ts.

ngAfterViewInit() { setTimeout(()=>{ let root: ActivatedRoute = this.activeRouter.root; //console.log(this.activeRouter.snapshot.url); this.breadcrumbs = this.getBreadcrumbs(root); }); }

然后在您的component.ts中，

And then in your component.ts,

@ViewChild(BreadcrumbComponent) breadcrumbRef: BreadcrumbComponent; //reference to the breadcrumb ngOnInit(){ this.router.events.filter(event => event instanceof NavigationEnd).subscribe( res => { this.breadcrumbRef.ngAfterViewInit() }); }