导航嵌套组件时创建面包屑(Angular 2)

Question

我正在努力解决这个问题:)

我们的想法是拥有一个组件,当通过子视图导航时更新面包屑,例如:

<breadcrumb> Products / Category-C / My-Product </breadcrumb>

Products -> Category-A
         -> Category-B
         -> Category-C  
                  |-> My-Product

Answer 1

可能这不是最好的解决方案,但你可以使用RoutesRecognized路由器事件并遍历event.state._root childrens:

import {Injectable, EventEmitter} from '@angular/core';
import {Router, RoutesRecognized, ActivatedRouteSnapshot} from '@angular/router';

@Injectable()
export class BreadcrumbComponent {
public breadcrumbs:Array<any>;
constructor(private _router:Router) {

this._router.events.subscribe(eventData => {
  if (eventData instanceof RoutesRecognized) {
    let event:any = eventData;
    let currentUrlPart = event.state._root;
    let currUrl = '#'; //for HashLocationStrategy

    this.breadcrumbs = [];
    while (currentUrlPart.children.length > 0) {
      currentUrlPart = currentUrlPart.children[0];
      let routeSnaphot = <ActivatedRouteSnapshot>currentUrlPart.value;

      currUrl += '/' + routeSnaphot.url.map(function (item) {
          return item.path;
        }).join('/');

      this.breadcrumbs.push({
        displayName: (<any>routeSnaphot.data).displayName,
        url: currUrl,
        params: routeSnaphot.params
      })
       console.log(this.breadcrumbs)
    }               
  }
});
}}

路由配置如下所示:

export const AppRoutes:RouterConfig = [{
path: 'app',
component: App,
data: {
  displayName: 'Home'
},
children: [
  {

    data: {
      displayName: 'Pages'
    },
    path: 'pages',
    component: Pages,       
    children: [             
    ]
  }
]}]

使用Angular 2 RC4测试,@ angular/router 3.0.0-beta.1

Answer 2

加上Null ???的答案，您可以使用PrimeNG的面包屑动态创建面包屑。

首先，您需要一个BreadcrumbService：

import { EventEmitter, Injectable } from '@angular/core';

import { MenuModule, MenuItem } from 'primeng/primeng';

/**
 * A service provides functions to get and set the breadcrumb of the app
 */
@Injectable()
export class BreadcrumbService {
  items: MenuItem[] = [];

  public breadcrumbChanged: EventEmitter<MenuItem[]> = new EventEmitter<MenuItem[]>();

  getBreadcrumb(): MenuItem[] {
    return this.items;
  }

  setBreadcrumb(breadcrumb: MenuItem[]): void {
    this.items = breadcrumb;
    this.breadcrumbChanged.next(this.items);
  }

}

然后在您的主要组件中，说AppComponent，注入BreadCrumbService，并在面包屑发生变化时告诉它，请更新它：

import { BreadcrumbService } from './breadcrumb.service';
import { BreadcrumbModule, MenuItem } from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: '/app.component.html',
})
export class AppComponent {
  breadcrumb: MenuItem[];

  constructor(private breadcrumbService: BreadcrumbService) {
    // whenever breadcrumb changes, update it
    this.breadcrumbService.breadcrumbChanged.subscribe(breadcrumb => { this.breadcrumb = breadcrumb });
  }
}

并且与您的AppComponent相对应的html应该如下所示：

<p-breadcrumb [model]="breadcrumb"></p-breadcrumb>

现在，您要在组件中动态创建面包屑，例如“我的产品”：

import { OnInit } from "@angular/core";
import { BreadcrumbService } from '../../common/breadcrumb.service'; 
import { MenuModule, MenuItem } from 'primeng/primeng';

@Component({
  selector: 'my-product.component',
  templateUrl: './my-product.component.html',
})
export class MyProduct implements OnInit {
  breadcrumbItems: MenuItem[] = [];

  constructor(private breadcrumb: BreadcrumbService) {}

  ngOnInit() {
    this.breadcrumbItems.push({label:'Products'});
    this.breadcrumbItems.push({label:'Category-C', routerLink: ['/products/category-c']});
    this.breadcrumbItems.push({label: 'My-Product'});
    this.breadcrumb.setBreadcrumb(this.breadcrumbItems);
  }
}