Question

使用Angular 8，我创建了一个“登录回调”页面，该页面应（通过链接或自动）重定向到上一页。但是上一页可以包含一些辅助路由。

因此，为避免导航页面“完全重载”，我尝试使用模板中的[routerLink]来构建“转到上一页”按钮和“ this.router.navigate（...）”如果要以编程方式进行重定向，请在控制器中添加

。

问题是：看来Angular无法正确序列化带辅助括号的辅助路由

示例：

控制器：

constructor(private router: Router){}

public redirectRoute: string;

onInit() {
  this.redirectRoute = '/home(modal:modal/secondary);param1=value1';
}

模板：

<a [routerLink]="redirectRoute">Go to previous page</a>

构建的URL序列化括号，（变为％28 ，而）变为％29 。因此导航失败，路线无法识别，并且回退到默认路线。

实际上，“ redirectRoute”是动态的，因此我不会寻找“在模板中直接构建redirectRoute”之类的答案。当然可以，但是我不能。

我尝试了很多事情；我可以解析URL（使用this.router.parseUrl(rawRedirectUrl);），它返回一个好的URLTree（辅助路由格式正确），但是我找不到如何在[routerLink]标记中使用URLTree。

如果我想使用this.router.navigate(this.redirectRoute)重定向...

如何正确重定向而不重新加载所有页面？

谢谢！

[编辑]

我打开了https://github.com/angular/angular/issues/35414

Answer 1

路由器链接也可以添加网址树。

请执行以下操作：

<a [routerLink]="[ '/home', {param: 123 } ]">Home</a>

将生成链接“ / home; param = 123”。

此处的示例：https://stackblitz.com/edit/angular-qcpcoy

stackblitz示例在两个组件之间路由。我正在使用上述语法构造链接，然后通过注入的ActivatedRoute阅读将参数记录到控制台的记录。

constructor(private route: ActivatedRoute) {
}

ngOnInit(): void {
  console.log(this.route.snapshot.params['param']);
}

Angular-生成带有辅助路由的routerLink

1 个答案: