RouterLink ile sorgu parametreleri nasıl iletilir


191

Bir sorgu parametresi geçirmek istiyorum prop=xxx.

Bu işe yaramadı

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

Kullanmak istediğiniz sözdizimi matris parametreleri içindir ve bu formdur <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, bu size bir matris url parametreleri (? Ve & ayırıcılar yerine noktalı virgül) verir ve buna ActivatedRoute.params yerine activatedRoute.queryParams ile erişebilirsiniz. Daha fazla bilgi burada stackoverflow.com/questions/35688084/… ve burada stackoverflow.com/questions/2048121/…
— William Ardila

1
Sorgu parametreleri ve matris parametreleri aynıdır. Tek fark, kök segmente eklendiklerinde, sorgu parametreleri olarak serileştirilmeleri, bir alt segmente eklendiklerinde matris parametreleri olarak serileştirilmeleridir.
— Günter Zöchbauer

Var biraz daha farklılıklar Bunu denetlemek web.archive.org/web/20130126100355/http://brettdargan.com/blog/... Ayrıca açısal doc burada bağlantı parametresi sözdizimini kontrol edebilirsiniz angular.io/docs/ts/latest/ rehber /…
— William Ardila

Yanıtlar:


375

queryParams

queryParamsrouterLinkgibi geçebilecekleri başka bir girdidir

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

fragment

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

routerLinkActiveOptions

Üst rotalarda ayarlanmış aktif sınıf rotaları da almak için:

[routerLinkActiveOptions]="{ exact: false }"

Kullanılacak sorgu parametrelerini geçirmek this.router.navigate(...)için

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

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

Ayrıca bakınız Https://angular.io/guide/router#query-parameters-and-fragments


Bu programlı olarak nasıl çalışır? This.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]) ile denedim; Ancak sonuç şuydu: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
— rickul

2
Cevabımı güncelledim. Eklediğim bağlantıya da bakın. Tam bir örnek gösteriyor.
— Günter Zöchbauer

Birkaç not: Rickul'un kodu ekstralardan önce gelen [ '/resetPassword' ], { queryParams: { username: loginName }})yerde olmalıdır ]. Ayrıca sorgu parametrelerinin büyük / küçük harfe duyarlı olduğunu unutmayın.
— Simon_Weaver

2
Hedefteki Params sorgusuna abone olmayı unutmayın: stackoverflow.com/a/39146396/2726844
— Vince I

1
Veya rotaları kullanıyorsanız runGuardsAndResolvers: 'always', rota medium.com/engineering-on-the-incline/…
— Adam
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.