22

我正在使用angular2 路由器。

要绘制 url 的面包屑，假设 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 ..'

然而现在；使用最后一个路由器，我无法再处理此识别逻辑。

如何获取与 url 关联的路由数据？

4

3 回答 3

24

更新为 RC5

您可以从以下位置获取所有激活的路由（与主出口相关联），而不是从当前 URL 开始并尝试从 URL 获取路由RouterState：

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

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

订阅路由器事件，然后，在每个事件之后，从 sNavigationEnd的树向下走：ActivatedRouteroot

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以获得类似的解决方案。

于 2016-08-06T21:09:48.963 回答
2

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

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

优点：工作

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

于 2016-07-12T18:53:01.200 回答
0

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

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

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

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

Angular 库的规划、创建和持续发布在这篇中型文章中有很好的记录

于 2019-06-27T11:42:31.143 回答