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

Question

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

所以，普通的 guard

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

中获取完整的（带有子路径）URL？ Angular 版本是 5.1.

Answer 1

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

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;
}

Answer 4

Angular 中已经有一个随时可用的函数来实现这个createUrlTreeFromSnapshot：

首先，您现在可以只从

UrlTree

方法返回

canActivate

。其次，如果你想将 URL 组合成字符串，你可以使用

UrlSerializer

API，例如反映哈希与路径 URL 策略：

import { createUrlTreeFromSnapshot, UrlSerializer } from '@angular/router';

// ...

class MyClass {

    constructor(private urlSerializer: UrlSerializer) {}

    getResolvedUrl(route: ActivatedRouteSnapshot) {
        return this.urlSerializer.serialize(
            createUrlTreeFromSnapshot(route.snapshot, ['.'])
        );
    }
}