Como passar parâmetros de consulta com um roteador

161

Eu quero passar um parâmetro de consulta prop=xxx.

Isso não funcionou

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>
angular angular2-routing Günter Zöchbauer
fonte
A sintaxe que você deseja usar é para parâmetros da matriz e este é o formulário <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, isso fornece parâmetros de URL da matriz (ponto-e-vírgula; em vez de? E & separadores) e você pode acessá-lo por ActivatedRoute.params, em vez de enabledRoute.queryParams Mais informações aqui stackoverflow.com/questions/35688084/… e aqui stackoverflow.com/questions/2048121/…
William Ardila 23/17
1
Os parâmetros de consulta e os parâmetros da matriz são os mesmos. A única diferença é quando são adicionados ao segmento raiz, são serializados como parâmetros de consulta, quando são adicionados a um segmento filho, são serializados como parâmetros de matriz.
Günter Zöchbauer 23/03
Se houver mais diferenças, consulte este web.archive.org/web/20130126100355/http://brettdargan.com/blog/… Também é possível verificar a sintaxe do parâmetro de link no documento angular aqui angular.io/docs/ts/latest/ guide /…
William Ardila 23/03

Respostas:

325

queryParams

queryParamsé outra entrada de routerLinkonde eles podem ser passados ​​como

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

fragment

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

routerLinkActiveOptions

Para obter também as classes ativas das rotas definidas nas rotas principais:

[routerLinkActiveOptions]="{ exact: false }"

Para passar parâmetros de consulta para this.router.navigate(...)usar

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

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

Veja também https://angular.io/guide/router#query-parameters-and-fragments

Günter Zöchbauer
fonte
Como isso funcionaria programaticamente? Eu tentei com this.router.navigate (['/ resetPassword', {queryParams: {nome de usuário: loginName}}]); Mas o resultado foi: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
rickul
2
Eu atualizei minha resposta. Veja também o link que adicionei. Mostra um exemplo completo.
Günter Zöchbauer
Algumas notas: o código de rickul deve ser o local [ '/resetPassword' ], { queryParams: { username: loginName }})onde ]vem antes dos extras. Além disso, não esqueça que os parâmetros de consulta diferenciam maiúsculas de minúsculas.
22619 Simon Ontem
2
Não se esqueça de se inscrever na queryParams no destino: stackoverflow.com/a/39146396/2726844
Vince I
1
Ou, se você estiver usando rotas, runGuardsAndResolvers: 'always'recarregará a rota medium.com/engineering-on-the-incline/…
Adam