使用参数定义路由时 angular 中的路由问题

Question

我有两条这样定义的路由

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

我在 AddTemplatesComponent 视图上有 "cancel" 按钮

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

但是单击取消按钮不会导航到 "Templates" 组件，并且 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 文件夹中的文件。

[UPDATE]: 如果您想以编程方式导航，可以使用 Router 的 navigate 方法和两个参数：相同的路线如上所述，配置选项包含 relativeTo 属性，指定当前路由作为计算相对路径的起点。根据docs：如果没有提供起始路线，则绝对导航。

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

...

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

使用参数定义路由时 angular 中的路由问题

Routing issue in angular while define routing with parameter

routes

angular-routing

angular