40

在我的一些 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。

在此处输入图像描述

4

3 回答 3

47

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
于 2018-11-22T11:04:37.487 回答
40

试试这个从 RouterStateSnapshot 获取它

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      console.log(state.url)
      ...
于 2018-05-09T09:55:52.747 回答
2

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;
}
于 2021-04-23T15:18:09.200 回答