角度路由器:如何替换param？

Question

让我们假设我有3个网址: /:projectId/info, /:projectId/users, /:projectId/users/:userId/profile.所有这些都有参数projectId.UI有一个组件可以从一个项目切换到另一个项目.所以我需要:

1. 获取当前网址
2. 按名称更改参数(例如projectId)
3. 导航到新网址

所以我需要一些类似的this.router.replaceParam(currentUrl, {projectId: 'project_id_2'})内容将转换/project_id_1/users/user_id_1/profile为/project_id_2/users/user_id_1/profile(以及任何其他带有:projectIdparam的URL )

我认为这是一个简单而常见的问题,但在1小时内没有找到解决方案.此处建议的解决方案不起作用,如上一条评论中所述

Answer 1

要从当前网址导航到特定链接，您可以执行以下操作，

 constructor(private route: ActivatedRoute, private router: Router){}
 ngOnInit() {
     this.route.params.subscribe(params => {
         // PARAMS CHANGED ..    

         let id = params['projectid'];    
     });
 }
 navigate(){
     this.router.navigateByUrl(this.router.url.replace(id, newProjectId));
     // replace parameter of navigateByUrl function to your required url
 }

在ngOnInit函数上，我们已经订阅了params，因此我们可以观察和执行url参数上的任何更改的语句。

Answer 2

您可以使用：

this.router.navigate(
      [],
      {
        relativeTo: this.activatedRoute,
        queryParams: {projectId: 'project_id_2'},
        queryParamsHandling: "merge", // remove to replace all query params by provided
      });

Answer 3

您可以使用 HTML 或 Ts

1 > 在 HTML 中

[routerLink]="['../info']"
        Or
[routerLink]="['../users']"
    like this etc....

2 > 在打字稿中

this.router.navigate(['../users'], { relativeTo: this.activatedRoute });

Answer 4

看看你的问题，你想改变2个参数。

如中所述：

https://angular.io/api/router/Router#navigatebyurl

你可以实施router.navigate([yourprojectId, 'users', youruserId , 'profile'], {relativeTo: route});