Ionic 4 - Страница сведений удаляет панель вкладок

Question

В Ionic 4 у меня есть приложение с шаблоном Master-Detail на домашнем компоненте.Мои вкладки работают для родительских элементов (компонентов) самого высокого уровня в дереве маршрутизатора.

Однако мои вкладки исчезают при переходе на страницу сведений.[Изображение страницы сведений находится здесь.]

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // { path: '', redirectTo: '/checklists', pathMatch: 'full' },
  // { path: '', redirectTo: '/tabs', pathMatch: 'full' },
  // { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'intro', loadChildren: './intro/intro.module#IntroPageModule' },

  // Checklists are added to the tab bar here (or not)
  { path: 'checklists', loadChildren: './home/home.module#HomePageModule' },                       // Tab Bar is Visible
  // { path: 'checklists/:id', loadChildren: './checklist/checklist.module#ChecklistPageModule' }, // Tab Bar is Not Visible

  { path: 'checklists/:id', 
    children: [
      { path: '', 
        loadChildren: './checklist/checklist.module#ChecklistPageModule'
      },
    ]
  }, // Tab Bar is Not Visible

  // Make checklists/:id into a NESTED route path? Nested, Auxiliary, and Child Routes

  { path: 'about',   loadChildren: './about/about.module#AboutPageModule' },
  { path: 'contact', loadChildren: './contact/contact.module#ContactPageModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage }       from './tabs.page';
import { HomePage }       from '../home/home.page';
import { AboutPage }      from '../about/about.page';
import { ContactPage }    from '../contact/contact.page';
import { ChecklistPage }  from '../checklist/checklist.page';

let tabsPath = 'tabs';
let tabsComponent = TabsPage;

let tabsEmptyPath = '';
let tabsRouteBasic = '/tabs/(home:home)';

// How do I turn the details of the About Tab into a variable?
// How does the router path/state get transported around in navigation parameters?
let aboutPath = 'about';
let aboutOutletName = 'about';

const routes: Routes = [
  {
    path: tabsPath,
    component: tabsComponent,
    children: [
      {
        path: tabsEmptyPath,
        redirectTo: tabsRouteBasic,
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'checklist/:id',        // This is temporary
        outlet: 'home',
        component: tabsComponent
      },
      {
        path: 'checklist',        // This is temporary
        outlet: 'checklist',
        component: ChecklistPage
      },
      // I would like to turn this path into a variable AND dynamically create its related component
      {
        path: aboutPath,
        outlet: aboutOutletName,
        component: AboutPage
      },
      // I would like to turn this path into a variable AND dynamically create its related component
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}