web-dev-qa-db-fra.com

Comment obtenir avec élégance l'url complète du ActivatedRouteSnapshot?

dans certains de mes angular gardes de route, je veux configurer le chemin "suivant", pour rediriger vers après une connexion réussie.

Ainsi, la signature de la fonction oridinary guard canActivate ressemble à ceci:

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

Le paramètre route est une instance d'ActivatedRouteSnapshot.

Auparavant, pour obtenir l'URL "suivante", je venais de l'obtenir à partir du route.url. Cela fonctionne très bien, tant qu'il n'y a pas de parcours enfants.

Mon exemple d'URL est /search/advanced?query_hash=1221d3b57f5616ee16ce70fdc78907ab, où advanced est une route enfant d'un search.

Les itinéraires enfants se trouvent dans route.children, mais itérer sur ces enfants (en particulier il peut y avoir plusieurs niveaux) et combiner l'URL de cette façon semble maladroit et laid.

Ce qui m'intéresse est contenu dans route._routerState.url propriété (étant une chaîne, en bas de l'image ci-dessous), mais c'est une variable "privée".

Suis-je en train de manquer quelque chose? Comment peut-on obtenir avec élégance l'url complète (avec les chemins enfants) du ActivatedRouteSnapshot? Angular est 5.1.

enter image description here

angularangular-routingangular-router-guards
10
Radosław Roszkowiak

essayez ceci pour l'obtenir à partir de RouterStateSnapshot

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

Il n'y a pas de fonction prête à l'emploi de Angular pour y parvenir, alors je les ai écrit:

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('/');
}

Exemple de sortie lorsque route provient de ProjectComponent:

const routes: Routes = [
    {
        path: 'project', component: ProjectListComponent, children: [
            {path: ':id', component: ProjectComponent}
        ]
    },
];
getResolvedUrl(route) => /project/id1
getConfiguredUrl(route) => /project/:id
13
Marc J. Schmidt