Angular 2 обновляет параметры URL-адреса без перенаправления

Используя Angular 2, как вы обновляете URL-адрес без перенаправления страницы.

Я знаю, что вы можете получить доступ к параметрам, используя ActivatedRoute queryParamMap Observable, но что, если я хочу изменить эти значения и отобразить их в URL-адресе.

Обновление значений в URL позволяет легко создавать закладки.

Я не хочу перенаправлять, поскольку параметры запроса, которые я добавляю, представляют собой простой фильтр данных, который я хочу сохранить.


angular query-parameters angular2-routing
person robinsio    schedule 14.02.2018    source источник
comment
Не могли бы вы привести пример вашего кода, пожалуйста?   -  person Pterrat    schedule 14.02.2018
comment
Вы можете перенаправить с помощью маршрутизатора, если он находится на том же компоненте, он изменит только URL-адрес, а не содержимое страницы. Это то, что вы хотите, или вы тоже хотите перезагрузить страницу?   -  person    schedule 14.02.2018
comment
Как перенаправить? Я не хочу перезагружаться. Извините, у меня пока нет общего кода, так как я хочу заранее знать, как это будет работать.   -  person robinsio    schedule 14.02.2018
comment
Вы должны взглянуть на это: stackoverflow.com/questions/35618463/ Это может сработать и для вас!   -  person Vincent Gagnon    schedule 14.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

В конструкторе компонентов подпишите параметр запроса на вашу модель.

this.route.queryParams.subscribe(params => {
  this.myValue = params['myValue'];
});

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

navigate() {
    this.router.navigate([], {queryParams: { mValue: this.myValue }});
}
person Darpholgshon    schedule 14.02.2018
comment
Есть ли способ добавить параметры в queryParams, не удаляя предыдущие? В примере это в основном знак =, но мне нужно, чтобы он был +=. Я хочу добавить новое значение, но сохранить все предыдущие. - person Kris Bonev; 01.06.2018

arrow_upward
0
arrow_downward

Просто используйте один и тот же компонент для двух разных маршрутов.

const appRoutes: Routes = [
    { path: 'somepath', component: someComponent }, // yourapp/somepath
    { path: 'anotherpath', component: someComponent }, // yourapp/anotherpath
];

<a class="nav-link" routerLink="/anotherpath" routerLinkActive="active"> change path</a>
person charsi    schedule 14.02.2018