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

Question

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

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

Answer 1

Вам придется вводить 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}`);
    });
}

Ваш routerLink будет:

[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