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

Question

我正在使用angular2路由器.

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

1. 获取路线site.com/a/b/c/15并获得与路线相关联的漂亮名称
2. 获取路线site.com/a/b/c并获得与路线相关联的漂亮名称
3. 获取路线site.com/a/b并获得与路线相关联的漂亮名称
4. 获取路线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进行了更新

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

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

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

订阅路由器事件,然后,在每个NavigationEnd事件之后,ActivatedRoute从以下位置向下走s 树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

有关类似的解决方案,另请参阅/sf/answers/2681728311/.

Answer 2

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

• 使路由可导出/可导入
• 从 router.events subscribe 获取当前 url 更新
• url 更改时，在路由路径上循环，查看模式是否与 url 匹配
• 如果pattern与url匹配，则从匹配的路由中获取数据

优点：有效

缺点：在不使用 ng2 路由器的情况下手动重做 url 路由识别