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.