Создайте параметры строки запроса через серию ссылок маршрутизатора.

Можно ли настроить ссылки маршрутизатора так, чтобы они просто добавлялись к строке запроса, чтобы мы могли построить строку запроса с помощью серии ссылок?

Учитывая URL:

http://localhost/app

И ссылка где-то на странице, похожая на эту:

<a [routerLink]="['.']" [queryParams]="{ foo: 1 }">link 1</a>

Будет ли ссылка на:

http://localhost/app?foo=1

Учитывая вторую ссылку:

<a [routerLink]="['.']" [queryParams]="{ bar: 1 }">link 2</a>

Можно ли составить маршрут:

http://localhost/app?foo=1&bar=1

а не перезаписывать текущую строку запроса? Я подозреваю, что это возможно, прослушивая события маршрутизатора и обрабатывая их вручную, но мне интересно, возможно ли это с помощью какой-либо конфигурации?


angular routerlink
person Community    schedule 24.02.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Существует saveQueryParams, который может сохранить foo = 1, пока вы переходите к bar = 1, я не пробовал, но в документах говорится, что его можно использовать следующим образом.

<a [routerLink]="['.']" [queryParams]="{ bar: 1 }" preserveQueryParams>link 2</a>
person davidejones    schedule 24.02.2017
comment
Да, похоже, это не работает в сочетании с предоставлением каких-либо параметров запроса. - person ; 24.02.2017
comment
хм, да, похоже, он все еще переопределяется. Здесь выглядит хороший ответ, который может помочь stackoverflow.com/questions/41726938/ - person davidejones; 24.02.2017
comment
Спасибо за это. По сути, это тот же вопрос, и он дал на мой окончательный ответ (нет собственного решения для конфигурации). Если я придумаю простое решение, я могу опубликовать его, иначе этот вопрос излишен. - person ; 24.02.2017

arrow_upward
0
arrow_downward

Достаточно просто получить текущие параметры запроса из активированного маршрута и неглубоко скопировать их с изменениями, необходимыми для возврата на маршрутизатор.

В html:

<a [routerLink]="['.']" [queryParams]="getQueryParams(1)">link 1</a>

в компоненте:

getQueryParams(id: number) {
  //this.queryParams retrieved by subscribing to the activated route on init
  let queryParams = Object.assign({}, this.queryParams);
  queryParams['foo'] = id;
  return queryParams;
}

Который вернет объект пары ключ-значение, который маршрутизатор ожидает для параметров запроса с рассматриваемым параметром, либо добавленным, либо переопределенным с любыми существующими нетронутыми.

person Community    schedule 24.02.2017