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

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

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

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

Jangan lupa untuk berlangganan queryParams sesuai target: stackoverflow.com/a/39146396/2726844

— Vince I

Atau jika Anda menggunakan rute, runGuardsAndResolvers: 'always'akan memuat ulang rute medium.com/engineering-on-the-incline/…

— Adam