Question

基本上，我有两个组成部分TodosComponent和TodoDetailsComponent。单击TodosComponent中的项目会将我带到TodoDetailsComponent，在那里我获取参数并从api中获取所需的数据。一切都很好。

但是我想在TodoDetailsComponent上做一个下一个按钮，以便传递给参数的id更改，并且我根据订阅了ActivateRoute参数的参数获得所需的结果。我用google和stackoverflow进行了很多操作，但是找不到能够给我指导的示例。 Here是该问题的有效演示。让我知道是否需要更多信息。任何信息都将对是否可能提供帮助。

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

如果更改id的值，您的路线仍将保持不变，可以尝试使用Router导航到所需的id。

您可以借助此demo

Answer 2

只需尝试通过更改ID 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]);
  }

希望这可以工作，谢谢-编码愉快！！

单击按钮时如何更改已激活路径的参数

2 个答案: