具有/不具有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。