Обновление routeparams в угловых 5 - PullRequest
Новая
       41

Обновление routeparams в угловых 5

0 голосов
/ 01 мая 2018

у меня есть маршрут, подобный этому dashboard/tour/2/269, этот компонент представляет детали тура, и внутри этого компонента есть некоторые ссылки, которые относятся к аналогичным маршрутам, поэтому, когда пользователь щелкает одну из этих ссылок, я хочу перезагрузить компонент на основе новые параметры, такие как, скажем, dashboard/tour/5/150, я попытался использовать прямое [routerLink], но он прикрепил новые параметры к старому, чтобы он стал таким, как этот dashboard/tour/2/269/tour/5/150, маршрут стал недействительным.

любые предложения, пожалуйста.

1 Ответ

0 голосов
/ 01 мая 2018

Вам нужно будет ввести ActivatedRoute в ваш компонент. Ваши маршруты должны быть установлены так: 

{ path: 'person/:id/:office_id', component: PersonComponent },

Тогда подпишитесь на параметры: 

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    .subscribe(params => {
      const id = +params['id'];
      const office = +params['office_id'];
      console.log(`Current params are person ID ${id} and office ID ${office}`);
    });
}

Ваш роутерLink будет: 

[routerLink]="['/persons', 2, 5]"

Здесь я вставил экземпляр ActivatedRoute как route в свой конструктор.

Вам потребуется получить каждый из параметров, перечисленных в маршрутизации для компонента Dashboard. В этом примере моя маршрутизация проста persons/:id, где я получу id от http://localhost:3000/persons/1. Так что, если бы у меня была ссылка маршрутизатора на следующего человека, скажем [routerLink]="['/persons', 2]", этот фрагмент кода обновился бы и дал бы id из 2.

Исходя из вашей текущей иллюстрации и вопроса, это звучит как решение, которое вы ищете.

Решение StackBlitz

https://stackblitz.com/edit/routing-params

...