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.

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

推荐答案

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

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

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

优点:有效

缺点:无需使用ng2路由器即可重做网址路由识别

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

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