如何从ActivatedRouteSnapshot优雅地获取完整的URL？

Question

在我的一些有角度的护卫队中，我想设置＆＃34;下一个＆＃34;路径，成功登录后重定向到。

因此，oridinary guard canActivate函数签名如下所示：

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

route参数是ActivatedRouteSnapshot的一个实例。

以前获得＆＃34; next＆＃34;我只是从route.url获取的网址。只要没有儿童路线，这种方法就可以了。

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

可以在route.children中找到子路由，但迭代这些子路径（特别是可能有多个级别），并且这种方式组合URL似乎很尴尬和丑陋。

我感兴趣的内容包含在route._routerState.url属性中（是一个字符串，位于下图中的底部），但它是一个＆＃34;私有＆＃34;变量

我错过了什么吗？如何才能优雅地从ActivatedRouteSnapshot获得完整（带子路径）的网址？ 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

Answer 2

尝试从RouterStateSnapshot

获取它

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      console.log(state.url)
      ...

Answer 3

Marc 针对他的 getResolvedUrl 的解决方案不返回查询参数。 下面的函数增加了对查询参数的支持。

getResolvedUrl(route: ActivatedRouteSnapshot): string {
  let url = route.pathFromRoot.map((v) => v.url.map((segment) => segment.toString()).join('/')).join('/');
  const queryParam = route.queryParamMap;
  if (queryParam.keys.length > 0) {
    url += '?' + queryParam.keys.map(key => queryParam.getAll(key).map(value => key + '=' + value).join('&')).join('&');
  }
  return url;
}