Як передавати параметри запиту за допомогою маршрутизатора


161

Я хочу передати параметр запиту prop=xxx .

Це не спрацювало

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

Синтаксис, який ви хочете використовувати, призначений для параметрів матриці, і це форма <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, це дає вам параметри URL-матриці (крапка з комою; замість? Та & роздільники), і ви можете отримати доступ до цього за допомогою ActivateRoute.params замість активованої Route.queryParams Додаткову інформацію тут stackoverflow.com/questions/35688084 / ... і тут stackoverflow.com/questions/2048121 / ...
Вільям ARDILA

1
Параметри запиту та параметри матриці однакові. Різниця полягає лише в тому, що вони додаються до кореневого сегмента, вони серіалізуються як параметри запиту, коли вони додаються до дочірнього сегмента, вони серіалізуються як параметри матриці.
Günter Zöchbauer

Майте ще кілька відмінностей, перегляньте цей web.archive.org/web/20130126100355/http://brettdargan.com/blog/… Також ви можете перевірити синтаксис параметра посилання в кутовому документі тут angular.io/docs/ts/latest/ довідник /…
Вільям Арділа

Відповіді:


326

queryParams

queryParamsє ще одним входом, routerLinkкуди вони можуть бути передані

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

fragment

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

routerLinkActiveOptions

Щоб також отримати маршрути активного класу, встановлені на батьківських маршрутах:

[routerLinkActiveOptions]="{ exact: false }"

Для передачі параметрів запиту для this.router.navigate(...)використання

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

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

Дивіться також https://angular.io/guide/router#query-parameters-and-fragments


Як би це працювало програмно? Я спробував з this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]); Але результат був: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
rickul

2
Я оновив свою відповідь. Дивіться також посилання, яке я додав. Він показує повний приклад.
Günter Zöchbauer

Пара зауважує: код Rrickul повинен бути [ '/resetPassword' ], { queryParams: { username: loginName }})там, де ]йде перед статтею . Також не забувайте, що параметри запитів залежать від регістру.
Simon_Weaver

2
Не забудьте підписатися на запитParams на цілі: stackoverflow.com/a/39146396/2726844
Vince I

1
Або якщо ви використовуєте маршрути, runGuardsAndResolvers: 'always'перезавантажте маршрут medium.com/engineering-on-the-incline/…
Адам,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.