Angular2 路由器，从 url 获取路由数据，以显示面包屑 [英] Angular2 router, get route data from url, to display breadcrumbs

问题描述

我正在使用 angular2 路由器.

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

To draw the breadcrumb of an url, lets say site.com/a/b/c/15 I do the following:

1. 获取site.com/a/b/c/15的路由并获取与路由关联的漂亮名称
2. 获取site.com/a/b/c的路由并获取与路由关联的漂亮名称
3. 获取site.com/a/b的路由并获取与路由关联的漂亮名字
4. 获取site.com/a的路由并获取与路由关联的漂亮名字

1. Get the route of site.com/a/b/c/15 and get the pretty name associated to the route
2. Get the route of site.com/a/b/c and get the pretty name associated to the route
3. Get the route of site.com/a/b and get the pretty name associated to the route
4. Get the route of site.com/a and get the pretty name associated to the route

所以假设我有以下路线:

So lets say I do have the following routes:

{ 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" 解释当前路线.

The result of my process would be an array containing {"I am C", "I am B", "I am C"} and thanks to that I can display a nice breadcrumb "I am A > I am B > I am C" that explains the current route.

这用于与路由器已弃用的操作一起使用

This use to work with the router-deprecated doing

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

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

However now; with the last router I am not able to process this recognize logic anymore.

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

推荐答案

到目前为止，最可行的解决方案是(完成):

So far, the most feasable solution is (done):

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

优点:有效

缺点:重做url-route识别手册，不使用ng2路由器一

Cons: redoing url-route recognition manuall without using the ng2 router one

这篇关于Angular2 路由器，从 url 获取路由数据，以显示面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！