Как изменить параметр активированного маршрута по нажатию кнопки

Question

В основном у меня есть два компонента TodosComponent и TodoDetailsComponent.Нажав на элемент в TodosComponent, вы попадете в TodoDetailsComponent, где я получу параметр и получу необходимые данные из API.Все работает отлично.

Но я хочу сделать следующую кнопку на моем TodoDetailsComponent, чтобы идентификатор, передаваемый параметру, изменился, и я получил желаемый результат на основе параметра, подписанного на параметры activRoute.Я много гуглю (d) и stackoverflow (ed), но не могу найти пример, который дает мне направление для продолжения. Здесь - рабочая демонстрация проблемы.Дайте мне знать, если потребуется дополнительная информация.Любая информация будет полезна, независимо от того, возможно ли это.

TodoDetails.component.ts

@Component({
  template: `<p>Todo Details Component</p>
    <div>{{ todo | json }}</div>
    <button type="button" (click)="next()">Next</button>
  `
})

export class TodoDetailsComponent implements OnInit{
  todo;
  constructor(private activatedRoute: ActivatedRoute, private service: Service) { }

  ngOnInit() { 
    this.activatedRoute.paramMap.pipe(
      switchMap(params => this.getTodo(+params.get('id')))
    ).subscribe(todo => this.todo = todo);
  }

  getTodo(id) {
    return this.service.getTodo(id);
  }

  next() {
    // if i grab the id over here and increament 
    // by id++ the id increses but as can be seen 
    // parameter is still the same, so won't work
  }

Answer 1

Просто попробуйте перейти к тому же компоненту, просто изменив идентификатор prams

export class TodoDetailsComponent implements OnInit{
  todo;
  id: number;
  constructor(private activatedRoute: ActivatedRoute, private service: Service, 
              private router : Router) { }

  ngOnInit() { 
    this.activatedRoute.paramMap.pipe(
      switchMap(params => {
          this.id = +params.get('id')
          return this.getTodo(this.id)
      })
    ).subscribe(todo => this.todo = todo);
  }

  getTodo(id) {
    return this.service.getTodo(id);
  }

  next() {
    this.id += 1;
    this.router.navigate(['/todos',this.id]);
  } 

Надеюсь, это сработает, спасибо - Счастливого кодирования !!

Answer 2

Ваш маршрут останется прежним, если вы измените значение id, вы можете попробовать и с помощью Router перейти к желаемому id.

Вы можете воспользоваться помощью этого демо