Angular 6: Navigating between child routes reloads parent component

I am experiencing an issue with one of my lazy loaded modules where, when navigating between child routes, the parent component is completely destroyed and reconstructed.

The system includes a number of lazy-loaded modules with their routes defined as follow (excuse the naming, I've had to obfuscate some stuff) :

 {
    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}
  },

The issue is specifically happening in the secondary module which looks like:

{
    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
      }
    ]
  },

The RacingComponent looks as follows:

<racing-navigation></racing-navigation>

<router-outlet></router-outlet>

In the racing-navigation component, I am running some dynamic routing which lands up looking something like:

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

The issue is coming in that the RacingComponent is completely recreating every time, which means a pretty bad UX as well as unnecessary API calls.

I have found a number of people having similar issues, but no concrete solution or explanation of something I'm doing/architechting incorrectly.

Please send help!!