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

Question

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

但问题在于链接 (url)。 ActivatedRoute具有链中特定路由的所有信息，但我找不到将其序列化为单个字符串值的方法，用作面包屑中的链接。我当然可以手动解析它，但是对于如此重要​​的东西来说，这实在是太多了。 ActivatedRoute有 url(本身分成多个部分)、查询参数、矩阵参数等。所有这些都在不同的属性中(其中一些甚至是 Observables，使事情不必要地复杂化)......但没有提供完整 url 的单个字符串属性(带有参数和所有内容) ).

顺便说一句，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));
  }
}