Jak przekazać parametry zapytania za pomocą routerLink

161

Chcę przekazać parametr zapytania prop=xxx.

To nie zadziałało

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>
angular angular2-routing Günter Zöchbauer
źródło
Składnia, której chcesz użyć, dotyczy parametrów macierzy i to jest formularz <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, daje to parametry macierzy adresu URL (średnik; zamiast separatorów? I &) i możesz uzyskać do nich dostęp przez ActivatedRoute.params zamiast ActivatedRoute.queryParams Więcej informacji tutaj stackoverflow.com/questions/35688084/ ... i tutaj stackoverflow.com/questions/2048121/ ...
William Ardila
1
Parametry zapytania i parametry macierzy są takie same. Jedyna różnica polega na tym, że gdy są one dodawane do segmentu głównego, są serializowane jako parametry zapytania, a gdy są dodawane do segmentu podrzędnego, są serializowane jako parametry macierzy.
Günter Zöchbauer
Miej więcej różnic, sprawdź to web.archive.org/web/20130126100355/http://brettdargan.com/blog/ ... Możesz również sprawdzić składnię parametrów łącza w dokumencie kątowym tutaj angular.io/docs/ts/latest/ guide /…
William Ardila

Odpowiedzi:

326

queryParams

queryParamsto kolejne wejście wskazujące, routerLinkgdzie można je przekazać

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

routerLinkActiveOptions

Aby również uzyskać trasy active class ustawione na trasach nadrzędnych:

[routerLinkActiveOptions]="{ exact: false }"

Przekazywanie parametrów zapytania do this.router.navigate(...)użycia

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

Zobacz też https://angular.io/guide/router#query-parameters-and-fragments

Günter Zöchbauer
źródło
Jak by to działało programowo? Próbowałem z this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]); Ale wynik był następujący: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
rickul
2
Zaktualizowałem odpowiedź. Zobacz także link, który dodałem. To pokazuje pełny przykład.
Günter Zöchbauer
Uwagi dla par: kod Rickula powinien znajdować się [ '/resetPassword' ], { queryParams: { username: loginName }})tam, gdzie ]występuje przed dodatkami. Nie zapominaj również, że parametry zapytania uwzględniają wielkość liter.
Simon_Weaver
2
Nie zapomnij zasubskrybować queryParams w celu: stackoverflow.com/a/39146396/2726844
Vince I
1
Lub jeśli używasz tras, runGuardsAndResolvers: 'always'przeładuje trasę medium.com/engineering-on-the-incline/ ...
Adam