Question

要绘制网址的面包屑，请说site.com/a/b/c/15我会执行以下操作：

获取site.com/a/b/c/15的路线并获取与路线相关联的漂亮名称
获取site.com/a/b/c的路线并获取与路线相关联的漂亮名称
获取site.com/a/b的路线并获取与路线相关联的漂亮名称
获取site.com/a的路线并获取与路线相关联的漂亮名称

所以我想说我确实有以下路线：

{ path: 'a', component: A, data:{prettyName: 'I am A'}}
{ path: 'b', component: B, data:{prettyName: 'I am B'}},
{ path: 'c', component: C, data:{prettyName: 'I am C'}},

我的过程的结果将是一个包含{"I am C", "I am B", "I am C"}的数组，并且由于我可以显示一个很好的面包屑"I am A > I am B > I am C"来解释当前路线。

这用于使用路由器弃用的

this.router.recognize(url).then((instruction) => {
    instruction.component.routeData.get('prettyName') // Would return 'I am ..'

但是现在;使用最后一个路由器，我无法再处理这个识别逻辑。

如何获取与网址相关联的路线数据？

Answer 1

更新了RC5

您可以从RouterState获取所有已激活的路线（与主要插座相关联），而不是从当前网址开始并尝试从网址获取路由：

在每个成功的导航生命周期结束后，路由器会构建一个ActivatedRoute s树，它构成路由器的当前状态。我们可以使用RouterState服务和Router属性从我们的应用程序中的任何位置访问当前routerState。

路由器状态为我们提供了从任何激活的路由上下遍历路由树的方法，以从父路由，子路由和兄弟路由获取我们可能需要的信息。 - reference

订阅路由器事件，然后在每次NavigationEnd事件后，从ActivatedRoute向下走root树的树：

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

有关类似的解决方案，另请参阅https://stackoverflow.com/a/38310404/215945。

Answer 2

到目前为止，最可行的解决方案是（完成）：

使路线导出/导入
从router.events subscribe获取当前网址更新
在网址更改时，循环路线的路径，查看模式是否与网址匹配
如果模式匹配网址，请从匹配路由获取数据

优点：工作

缺点：重做url-route识别manuall而不使用ng2路由器

Answer 3

任何面包屑解决方案都必须处理-

在应用程序路由中定义面包屑的声明性方法。
动态异步方式，用于通过服务器响应中的标签更新任何路由。
跳过在面包屑中显示特定路线的方式。

我创建了一个用于处理所有这些问题的Angular库，称为 xng-breadcrumbs -https://github.com/udayvunnam/xng-breadcrumb

随时检查，开发了一个显示面包屑用法的Angular应用-https://xng-breadcrumb.netlify.com

良好的角度库计划，创建和持续发布documented in this medium article

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

3 个答案: