使用参数定义路由时出现角度路由问题

Question

我有两条这样定义的路线

children: [
                            {
                                path: 'Templates', component: TemplatesComponent
                            },
                            {
                                path: 'AddEditTemplate/:id', component: AddTemplatesComponent
                            }]

我在 AddTemplatesComponent 视图上有“取消”按钮

<a class="btn btn-default no-margin" [routerLink]="['../Templates']">Cancel</a>

但单击取消按钮时，它不会导航到“模板”组件，并且 url 从“/AddEditTemplate/5”更改为“/AddEditTemplate/Templates”。但是 url 应该改为“/Templates”。

我做错了什么？请帮忙。

Answer 1

事实上，您必须在路径中向上走 2 条路线。例如，假设您在root/AddEditTemplate/2。如果您在路径中向上走 1 条路线，您将位于 root/AddEditTemplate。因此，要再次进入root 以到达root/Templates，您应该在路径中向上走2 条路线：

<a class="btn btn-default no-margin" [routerLink]="['../../Templates']">Cancel</a>

签出这个Stackblitz demo => 只关注module-1 文件夹内的文件。

[更新]：如果你想以编程方式导航，你可以使用 Router 的 navigate 方法和两个参数：与上面相同的路由和一个包含 @ 的配置选项987654331@属性指定当前路线作为起点计算相对路径。根据docs：如果没有提供起始路线，导航是绝对的。

constructor(
  private _router: Router,
  private _activatedRoute: ActivatedRoute
) {}

...

_navigate() {
  this._router.navigate(['../../Templates'], {
    relativeTo: this._activatedRoute
  });
}