我正在尝试构建breadcrumb以显示在我的“ shell”组件中(一个带有< router-outlet>).我正在注入Angular的路由器服务,并通过它从routerState.root遍历其firstChild(或children [0])属性直到null,构建包含当前显示路由的(链接)组件列表.结果是ActivatedRoute对象的链接列表.当我将自定义数据附加到每个定义的路径(例如标题)时,我可以在运行时获取(通过ActivatedRoute.data成员),因此我可以在面包屑中显示项目的名称.

但问题在于链接(网址). ActivatedRoute包含链中特定路径的所有信息,但我找不到将其序列化为单个字符串值的方法,以用作痕迹中的链接.我当然可以手动解析它,但这对于非常重要的事情来说太过分了. ActivatedRoute有url(本身分段),查询参数,矩阵参数等等都在不同的属性中(有些甚至是Observables,不必要地使事情变得复杂)……但是没有单个字符串属性可以提供完整的url(使用params和一切).

顺便提一下,Router服务有serializeUrl()成员,它接受UrlTree类型的参数,并将其转换为字符串.也许有一些方法可以将ActivatedRoute转换为UrlTree,这样我就可以使用Router.serializeUrl()？..

简单地说：如何从ActivatedRoute(或ActivatedRouteSnapshot)对象中获取序列化字符串？ (显然我自己没有编写整个解析逻辑).

这似乎是必不可少的事情,因为ActivatedRoute本质上是字符串url的解析表示(如果我正确地理解了这整个概念)……并且路由器甚至还有帮助方法来字符串化UrlTree对象(从未解释过如何检索第一名)…

@Component({
  selector: "foo"
})
class Foo {
  constructor(router: Router,route: ActivatedRoute) {
    const urlTree = router.createUrlTree(["."],{ relativeTo: route });
    console.log(router.serializeUrl(urlTree));
  }
}