Angular 6：在子路由之间导航会重新加载父组件

Question

我的一个延迟加载模块遇到了一个问题，当在子路由之间导航时，父组件被完全破坏和重建。

该系统包括许多延迟加载的模块，其路由定义如下（请原谅命名，我不得不混淆一些东西）：

 {
    path: '',
    canActivate: [DefaultLandingGuard],
    component: LandingComponent,
    pathMatch: 'full',
    data: { permissions: [] }
  },
  {
    path: 'main',
    loadChildren: './main/main.module#MainModule'
  },
  {
    path: 'secondary',
    loadChildren: './secondary/secondary.module#SecondaryModule',
    data: { game: GAME.SECONDARY}
  },

该问题特别发生在辅助模块中，如下所示：

{
    path: 'racing',
    data: { permissions: [] },
    component: RacingComponent,
    children: [
      { path: '', redirectTo: 'TODAY', pathMatch: 'full' },
      {
        path: ':timePeriod',
        component: RacingRegionListComponent
      },
      {
        path: ':timePeriod/:region',
        component: RacingRegionListComponent
      },
      {
        path: ':timePeriod/:region/:venue',
        component: RacingRegionListComponent
      }
    ]
  },

外观RacingComponent如下：

<racing-navigation></racing-navigation>

<router-outlet></router-outlet>

在该racing-navigation组件中，我正在运行一些动态路由，其结果如下：

this.router.navigate(['secondary/racing/TODAY/France']

问题在于RacingComponent每次都完全重新创建，这意味着非常糟糕的用户体验以及不必要的 API 调用。

我发现很多人都有类似的问题，但没有具体的解决方案或解释我正在错误地做/架构的事情。

请发送帮助！