Как передать параметры запроса с routerLink

162

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

Это не сработало

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

angular angular2-routing

— Гюнтер Цохбауэр
источник

Синтаксис, который вы хотите использовать, предназначен для параметров матрицы, и это форма <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, которая дает вам параметры матрицы URL (точка с запятой; вместо разделителей? И &), и вы можете получить к нему доступ посредством ActivatedRoute.params вместо activRoute.queryParams. Дополнительная информация здесь stackoverflow.com/questions/35688084/… а здесь stackoverflow.com/questions/2048121/…

— Уильям

Параметры запроса и параметры матрицы совпадают. Разница лишь в том, что когда они добавляются в корневой сегмент, они сериализуются как параметры запроса, когда они добавляются в дочерний сегмент, они сериализуются как параметры матрицы.

— Гюнтер Цохбауэр

Есть еще некоторые различия, проверьте этот web.archive.org/web/20130126100355/http://brettdargan.com/blog/… Также вы можете проверить синтаксис параметра ссылки в угловом документе здесь angular.io/docs/ts/latest/ гид /…

— Уильям

328

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

Я обновил свой ответ. Смотрите также ссылку, которую я добавил. Это показывает полный пример.

— Гюнтер Цохбауэр

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

— Simon_Weaver

Не забудьте подписаться на queryParams на цели: stackoverflow.com/a/39146396/2726844

— Винс I

Или, если вы используете маршруты, runGuardsAndResolvers: 'always'перезагрузите маршрут medium.com/engineering-on-the-incline/…

— Адам