Как элегантно получить полный URL-адрес из ActivatedRouteSnapshot? - PullRequest
Новая
       34

Как элегантно получить полный URL-адрес из ActivatedRouteSnapshot?

0 голосов
/ 09 мая 2018

в некоторых из моих охранников угловых маршрутов я хочу установить «следующий» путь, на который будет перенаправляться после успешного входа в систему.

Итак, сигнатура функции простого охранника 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 (в виде строки в нижней части изображения ниже), но это переменная "private".

Я что-то упустил? Как можно элегантно получить полный (с детскими путями) URL из ActivatedRouteSnapshot? Угловая версия 5.1.

enter image description here

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Нет готовой к использованию функции от 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
0 голосов
/ 09 мая 2018

попробуйте это получить из RouterStateSnapshot 

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