Le routeur Angular2 conserve la chaîne de requête

Question

J'ai écrit un Angular2 (v2.0.1) l'application qui permet d'utiliser le routeur. Le site web est chargé avec plusieurs paramètres de chaîne de requête, de sorte que la totalité de l'URL d'abord ressemble à ceci:

https://my.application.com/?param1=val1&param2=val2&param3=val3

Dans mon itinéraire de configuration, j'ai une entrée qui redirige un itinéraire vide:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

Mon problème est, que, après l'application a été amorcé, l'URL ne contient pas de paramètres de requête plus, au lieu de cela, il ressemble à ceci:

https://my.application.com/comp1

Est-il possible que je peux configurer le routeur afin qu'il garde la première chaîne de requête lors de la navigation?

Merci
Lukas

Answer 1

Je ne pense pas qu'il y est un moyen de définir que dans la configuration des routes.

Actuellement, il est pris en charge pour l' routerLinks et de l'impératif de navigation pour activer

• preserveQueryParams et
• preserveFragment

Vous pouvez ajouter un garde pour le vide chemin de la route, où, dans la garde de navigation à l' /comp1 de l'itinéraire est fait.

router.navigate(['/comp1'], { preserveQueryParams: true }); //deprecated see update note

router.navigate(['/comp1'], { queryParamsHandling: "merge" });

Il y a un PR de permettre de configurer preserveQueryParams à l'échelle mondiale.

Mise à jour remarque: à partir de https://angular.io/api/router/NavigationExtras, preserveQueryParams est obsolète, utilisez queryParamsHandling au lieu

Answer 2

Si vous naviguez à l'aide d'un modèle HTML, vous pouvez utiliser

 <a [routerLink]="['/page-2']" [routerLinkActive]="['is-active']" queryParamsHandling="merge">
 

Il convient de noter que le paramètre queryParamsHandling est sans crochets.

Answer 3

La réponse de Günter Zöchbauer devrait fonctionner correctement mais, pour une raison quelconque, cela ne fonctionne pas du tout pour moi. Ce qui a fini par fonctionner, c’est de passer les queryParams directement au lieu de les «préserver».

Voici à quoi ressemble ma garde:

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    (...)
    this.router.navigate(['login'], { queryParams: route.queryParams });
}
 

Answer 4

Vous pouvez vouloir rechercher sur https://github.com/angular/angular/issues une demande de fonctionnalité similaire à celle-ci. S'il n'en existe pas, soumettez une demande de fonctionnalité.

En attendant: je pense que vous devrez créer un composant, sur le chemin: '', dans le seul but de rediriger ensuite vers '/ comp1' tout en préservant les paramètres QueryString.

Answer 5

capturer l'URL d'origine dans -base href-

https://example.com/order?id=123

alors il va présister

https://example.com/order?id=123#/product