带有/不带有 ID 的子路由之间的 Angular 5 路由

Question

我有一个 Angular 5 应用程序，其模块的路由配置如下所示

const routes: Routes = [
      {
        path: 'user/:userId',
        component: UserSelectionComponent,
        children: [
          {
            path: 'overview',
            component: OverviewComponent
          },
          {
            path: 'selection',
            component: SelectionComponent
          },
          {
            path: 'selection/:groupId',
            component: SelectionComponent
          }
        ]
      }
    ];

我的 SelectionComponent.ts 中有一个保存功能，我想在单击保存按钮时将其路由到 OverviewComponent。

this._router.navigate([`../overview`], { relativeTo: this.route });

当我导航到没有 ID 的选择时，这可以正常工作。但是，当我传入一个 ID 时，它会从 http://localhost:4200/user/1/selection/1 路由到 http://localhost:4200/user/1/selection/overview 而不是 http://localhost:4200/user/1/overview

如果没有传入 ID，我如何使用相同的 router.navigate 代码从 SelectionComponent 导航回 OverviewComponent？

Answer 1

您可以使用简单的if/else 开关。定义选择 ID 后，导航到 ../../overview 而不是 ../overview。