Angular 如何在单击按钮时更改激活路由的参数

基本上，我有两个组件

todoComponent

和

todetailsComponent

。单击

ToDoComponent

中的一个项目，我将进入

TodoDetailsComponent

，在那里获取参数并从api获取所需数据。一切都很顺利

但是我想在我的

ToDedetailsComponent

上做一个next按钮，这样传递给参数的id就会改变，并且我会根据订阅到activatedRoute参数的参数获得所需的结果。我在google（d）和stackoverflow（ed）上搜索了很多次，但找不到一个能给我指明前进方向的例子。是该问题的工作演示。如果需要更多信息，请告诉我。无论是否可能，任何信息都会有帮助

TodoDetails.component.ts

@组件({
模板：`Todo详细信息组件

{{todo | json}}
下一个
`
})
导出类ToDedetailsComponent实现OnInit{
待办事项；
构造函数（私有activatedRoute:activatedRoute，私有服务：service）{}
ngOnInit（）{
this.activatedRoute.paramMap.pipe(
开关映射（params=>this.getTodo（+params.get（'id'））
).subscribe（todo=>this.todo=todo）；
}
盖托多（id）{
返回此.service.getTodo（id）；
}
下一个（）{
//如果我拿到这里的身份证并增加
//通过id++可以看到，id增加了
//参数仍然相同，因此不起作用
}

如果更改

id

的值，您的路线将保持不变，您可以尝试使用

路由器

导航到所需的

id

---

您可以借助此功能

只需更改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]);
  } 

---

希望这能起作用，谢谢-快乐编码！！

如果更改

id

的值，您的路线将保持不变，您可以尝试使用

Router

导航到所需的

id

。或者您可以在

下一步（）中调用
getTodo（）

使用所需的

id

，但路由仍将保持不变。这就是我想在单击“下一步”按钮时更改参数的原因，我可以举一个例子，如您所说的“使用路由器导航到所需id”通过附加id

this.route.navigate导航到
next（）
函数中的相同组件['routeName'，this.id]

在构造函数中注入路由器，并在

next（）

函数中添加此代码尝试此功能，谢谢@SarthakAggarwal工作。添加此作为答案，以便我可以接受：）在

next

中调用

getTodo（）

不会做任何事情，因为我没有订阅

getTodo（）

在函数中使用

switchMap

中的函数，因此我必须进一步更改代码。但是您的演示运行良好，因此请更改您的答案，以便我可以接受此行

this.id+=this.id；

第一次增加id 1，第二次增加id 2，依此类推，它应该是

 this.id=this.id+1

或

this.id+=1

。请更改您的答案，以便我可以向您报告这是一个错误-更新了答案-抱歉造成混淆