时间戳

首页 > 解决方案 > 如何优雅地从 ActivatedRouteSnapshot 中获取完整的 url？

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

问题描述

在我的一些 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属性中（作为字符串，在下图的底部），但它是一个“私有”变量。

我错过了什么吗？如何优雅地从ActivatedRouteSnapshot? 角度版本是 5.1。

在此处输入图像描述

标签： angularangular-routingangular-router-guards

解决方案

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

推荐阅读