web-dev-qa-db-fra.com

Angular 2 Routage basé sur les paramètres de requête

Est-il possible dans Angular 2 de définir un routage basé sur des paramètres de requête? J'aimerais avoir le comportement suivant:

Si l'utilisateur entre l'URL http:<server-path>/search, je souhaite router vers un composant StartPage. 

Si l'utilisateur entre l'URL http:<server-path>/search?query=sometext, je souhaite router vers le composant ResultList. 

Je sais qu'il est possible d'utiliser path parameters pour l'acheminement, mais ce n'est pas ce que j'aime faire. Je souhaite utiliser query parameters si possible . Je sais comment déclencher une navigation angulaire avec des paramètres de requête mais je ne sais pas comment configurer les itinéraires. 

angularrouting
7
Manuel Mauky

Par conséquent, vous ne pouvez pas définir path avec la chaîne de requête mais vous pouvez utiliser route matcher à la place et déterminer à quel moment router vers le composant ResultList. Vous définissez ceci au-dessus de la définition de route par défaut pour search de sorte que, si la correspondance échoue, la route de recherche par défaut ne contient aucune chaîne de requête.

{
    component: ResultListComponent,
    matcher: (url: UrlSegment[]) => {
      console.log(url);
      return url.length === 1 && url[0].path.indexOf('search?query=') > -1 ? ({consumed: url}) : null;
    }
},
{
    path: 'search',
    component: SearchComponent,
}

Démo

8
Teddy Sterne

Dans le code ci-dessous, je montrerai comment passer des paramètres de chaîne de requête sur n'importe quelle route. 

supposons que nous voulions avoir l'URL ci-dessous:

http://localhost:4200/myUrl?QueryParamEx=2258

Dans votre constructeur, injectez la dépendance ROUTER

constructor(...private router: Router..){...}

La fonction de navigation nous permettra de naviguer vers l'URL précédente 

goMyUrl() {
  this.router.navigate(['/myUrl'], { queryParams: { QueryParamEx: '2258' } });
}
2
BERGUIGA Mohamed Amine

Vous pouvez également configurer quelque chose comme ceci:

Routes:

{ path: 'server-path/:id', component: ResultListComponent },
{ path: 'server-path', component: serverPathComponent },

ResultListComponent

queryParam: string;
    ngOnInit() {     
           this.route.params.forEach((params: Params) => {
               this.queryParam = params['id'];

           });
       }

Vous pouvez appeler n'importe quelle fonction ou tout ce que vous devez faire à l'aide de cette requête. 

Pour plus d’informations sur les paramètres de requête, voir Guide de routage et de navigation

0
Bhetzie