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

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

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

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

Não se esqueça de se inscrever na queryParams no destino: stackoverflow.com/a/39146396/2726844

— Vince I

Ou, se você estiver usando rotas, runGuardsAndResolvers: 'always'recarregará a rota medium.com/engineering-on-the-incline/…

— Adam