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 я запускаю некоторую динамическую c маршрутизацию, которая выглядит примерно так:

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

Проблема заключается в том, что RacingComponent каждый раз полностью воссоздается, что означает довольно плохой UX, а также ненужные вызовы API.

Я обнаружил, что у многих людей были похожие проблемы , но нет конкретного решения или объяснения того, что я делаю / неправильно строю архитекторы.

Пожалуйста, пришлите помощь !!