angular - 如何优雅地从 ActivatedRouteSnapshot 获取完整的 url？

Question

在我的一些 Angular 路由守卫中，我想设置“下一个”路径，以便在成功登录后重定向到。

所以，普通的守卫canActivate函数签名看起来是这样的:

public canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
  // ...blah
  return true;
}

route 参数是 ActivatedRouteSnapshot 的实例。

之前为了获取“下一个”URL，我只是从 route.url 获取它。只要没有子路由，这就可以正常工作。

我的示例 URL 是 /search/advanced?query_hash=1221d3b57f5616ee16ce70fdc78907ab，其中 advanced 是 search 的子路由。

子路由可以在 route.children 中找到，但是迭代这些子路由(尤其是可能有多个级别)并以这种方式组合 URL 看起来很笨拙和丑陋。

我感兴趣的是包含在 route._routerState.url 属性中(是一个字符串，在下图的底部)，但它是一个“私有(private)”变量。

我错过了什么吗？如何优雅地从 ActivatedRouteSnapshot 获取完整的(带有子路径)URL？ Angular 版本是 5.1。

Answer 1

没有准备好使用 Angular 路由器的功能来实现这一点，所以我写了它们:

function getResolvedUrl(route: ActivatedRouteSnapshot): string {
    return route.pathFromRoot
        .map(v => v.url.map(segment => segment.toString()).join('/'))
        .join('/');
}

function getConfiguredUrl(route: ActivatedRouteSnapshot): string {
    return '/' + route.pathFromRoot
        .filter(v => v.routeConfig)
        .map(v => v.routeConfig!.path)
        .join('/');
}

route 来自 ProjectComponent 时的示例输出:

const routes: Routes = [
    {
        path: 'project', component: ProjectListComponent, children: [
            {path: ':id', component: ProjectComponent}
        ]
    },
];
getResolvedUrl(route) => /project/id1
getConfiguredUrl(route) => /project/:id