Cara melewati parameter kueri dengan routerLink

161

Saya ingin memberikan parameter kueri prop=xxx.

Ini tidak berhasil

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>
angular angular2-routing Günter Zöchbauer
sumber
Sintaks yang ingin Anda gunakan adalah untuk parameter matriks dan ini adalah formulir <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, ini memberi Anda parameter url matriks (titik koma; bukan? Dan & pemisah) dan Anda dapat mengaksesnya dengan ActivatedRoute.params alih-alih diaktifkanRoute.queryParams Informasi lebih lanjut di sini stackoverflow.com/questions/35688084/… dan di sini stackoverflow.com/questions/2048121/…
William Ardila
1
Parameter kueri dan parameter matriks sama. Satu-satunya perbedaan adalah ketika mereka ditambahkan ke segmen root, mereka diserialisasi sebagai parameter kueri, ketika mereka ditambahkan ke segmen anak, mereka diserialisasi sebagai parameter matriks.
Günter Zöchbauer
Ada beberapa perbedaan lagi, periksa web.archive.org/web/20130126100355/http://brettdargan.com/blog/... Anda juga dapat memeriksa sintaks parameter tautan dalam dokumen sudut di sudut dokumen di sini angular.io/docs/ts/latest/ guide / ...
William Ardila

Jawaban:

326

queryParams

queryParamsadalah input lain di routerLinkmana mereka dapat dilewati

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

fragment

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

routerLinkActiveOptions

Untuk juga mendapatkan rute kelas aktif yang ditetapkan pada rute induk:

[routerLinkActiveOptions]="{ exact: false }"

Untuk melewati parameter kueri untuk this.router.navigate(...)digunakan

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

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

Lihat juga https://angular.io/guide/router#query-parameters-and-fragments

Günter Zöchbauer
sumber
Bagaimana ini akan bekerja secara terprogram? Saya mencoba dengan this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}])); Tetapi hasilnya adalah: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
rickul
2
Saya memperbarui jawaban saya. Lihat juga tautan yang saya tambahkan. Ini menunjukkan contoh lengkap.
Günter Zöchbauer
Catatan pasangan: kode rickul harusnya berasal [ '/resetPassword' ], { queryParams: { username: loginName }})dari mana ]sebelum ekstra. Juga jangan lupa bahwa permintaan params peka terhadap huruf besar-kecil.
Simon_Weaver
2
Jangan lupa untuk berlangganan queryParams sesuai target: stackoverflow.com/a/39146396/2726844
Vince I
1
Atau jika Anda menggunakan rute, runGuardsAndResolvers: 'always'akan memuat ulang rute medium.com/engineering-on-the-incline/…
Adam