Angular

Question

在我的 Angular 12 项目中，我有这样的路线：

 /:par1/:par2/something/page
 /:par1/:par2/something2/page2

我需要以编程方式设置 par1 和 par2。

现在我使用这段代码来实现：

const url = this.router.routerState.snapshot.url;
const splittedUrl = url.split('/');
splittedUrl[1] = getPar1();
splittedUrl[2] = getPar2();
this.router.navigate(splittedUrl);

但我发现这是一个非常丑陋的解决方案。

有没有办法像我们从激活的路由中获取它们时那样通过名称设置 par1 和 par2？

Answer 1

我今天解决了同样的问题。

这是我的方法：

将 ActivatedRoute 导入构造函数

constructor(private activatedRoute: ActivatedRoute)

使用 activatedRoute 获取 urlSegment 并映射包含所有段的数组（在需要时应用您的更改）

这是针对您的问题应用的示例

const url: string[] = this.activatedRoute.snapshot['_urlSegment'].segments.map((urlSegment: UrlSegment, index: number) => {
      if (index === 0) return getPar1();
      else if (index === 1) return getPar2();
      else return urlSegment.path;
});
this.router.navigate(url);

Angular - 按名称编辑路由变量

Angular - Edit route variables by name

angular-ui-router