Angular 2 Routing basierend auf Abfrageparametern

Question

Ist es in Angular 2 möglich, Routing basierend auf Abfrageparametern zu definieren? Ich möchte das folgende Verhalten haben:

Wenn der Benutzer die URL http:<server-path>/search eingibt, möchte ich zu einer Komponente StartPage routen.

Wenn der Benutzer die URL http:<server-path>/search?query=sometext eingibt, möchte ich an die Komponente ResultList routen.

Ich weiß, dass es möglich ist, Pfad Parameter für das Routing zu verwenden, aber das ist nicht, was ich gerne tun. Ich möchte Abfrage Parameter verwenden, wenn möglich. Ich weiß, wie man die Navigation in angular mit Abfrageparametern auslöst, aber ich weiß nicht, wie man die Routen konfiguriert.

Answer 1

Sie können also keine path mit der Abfragezeichenfolge darin definieren, aber Sie können stattdessen eine Route matcher verwenden und bestimmen, wann die Route zur Komponente ResultList weitergeleitet werden soll. Sie definieren dies über der Standard-Routendefinition für search, sodass bei fehlgeschlagener Übereinstimmung standardmäßig die Suchroute ohne Abfragezeichenfolge verwendet wird.

{ 
    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, 
} 

Demo

Answer 2

Sie können auch Setup etwas wie folgt aus:

Routen:

{ 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']; 

      }); 
     } 

Mit diesem queryParam können Sie alle Funktionen aufrufen, die Sie benötigen.

Mehr auf Abfrage params können an der Routing & Navigation guide

Answer 3

Im folgenden Code gefunden werden Ich werde zeigen, wie Query-String-Parameter über eine beliebige Route passieren.

nehmen wir die unten stehende URL haben wollen:

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

In Ihrem Konstruktor injiziert, um die ROUTER Abhängigkeit

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

die Navigate-Funktion wird es uns ermöglicht den vorhergehenden URL zu navigieren

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