有没有办法在Angular 6中创建动态面包屑 [英] Is there a way to create dynamic breadcrumbs in 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()
    });
}

这篇关于有没有办法在Angular 6中创建动态面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！