如何在Angular 2中将ActivatedRoute序列化为字符串？

Question

我正在尝试构建breadcrumb以显示在我的"shell"组件中(一个带有<router-outlet>).我正在注入Angular的Router服务,并通过遍历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的解析表示(如果我正确地理解了这整个概念)...... Router甚至还有帮助方法来UrlTree对象化字符串(从来没有解释如何在第一个中检索地点)...

Answer 1

router.createUrlTree可以收到一个ActivatedRoute。

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