如何优雅地从 ActivatedRouteSnapshot 获取 full url？

Question

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

所以，普通的 guard canActivate 函数签名看起来像这样：

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

route参数是ActivatedRouteSnapshot的实例。

之前要获得 "next" 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

试试这个从 RouterStateSnapshot 获取它

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

Answer 2

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 3

Marc 的 getResolvedUrl 解决方案没有 return 查询参数。下面的函数添加了对查询参数的支持。

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

如何优雅地从 ActivatedRouteSnapshot 获取 full url？

How to elegantly get full url from the ActivatedRouteSnapshot?

angular

angular-routing

angular-router-guards