Angular2路由器,从url获取路由数据,显示面包屑

您可以从RouterState获取所有激活的路由(与主要插座相关联),而不是从当前URL开始并尝试从URL获取路由：

After the end of each successful navigation lifecycle,the router builds a tree of ActivatedRoutes,which make up the current state of the router. We can access the current RouterState from anywhere in our application using the Router service and the routerState property.

The router state provides us with methods to traverse up and down the route tree from any activated route to get information we may need from parent,child and sibling routes. — 07000

订阅路由器事件,然后,在每个NavigationEnd事件之后,从根目录下移动ActivatedRoutes树：

import { Component } from '@angular/core';
import { Router,ActivatedRoute,NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'breadcrumbs',template: `
  <div>
    breadcrumbs: 
    <span *ngFor="let breadcrumb of breadcrumbs; let last = last">
      <a [routerLink]="breadcrumb.url">{{breadcrumb.label}}</a>
      <span *ngIf="!last">></span>
    </span>
  </div>`
})
export class BreadcrumbsComponent {
  breadcrumbs: Array<Object>;
  constructor(private router:Router,private route:ActivatedRoute) {}
  ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(event => {  // note,we don't use event
        this.breadcrumbs = [];
        let currentRoute = this.route.root,url = '';
        do {
          let childrenRoutes = currentRoute.children;
          currentRoute = null;
          childrenRoutes.forEach(route => {
            if(route.outlet === 'primary') {
              let routeSnapshot = route.snapshot;
              console.log('snapshot:',routeSnapshot)
              url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
              this.breadcrumbs.push({ 
                label: route.snapshot.data.breadcrumb,url:   url });
              currentRoute = route;
            }
          })
        } while(currentRoute);
      })
  }
}

路线看起来像这样：

{ path: '',component: HomeComponent,data: {breadcrumb: 'home'}}

Plunker – RC.5,路由器3.0.0-rc.1

另见http://stackoverflow.com/a/38310404/215945类似的解决方案.