Одинаковый заголовок для всех компонентов в ионном меню

Question

В моем ионном приложении у меня есть menu.page, который содержит ion-split-pane вместе с ion-menu и ion-router-outlet.

То, чего я хочу добиться, - это один и тот же хедер для всех компонентов, которые получаютмаршрутизируется внутри <ion-router-outlet id="menu-content" main></ion-router-outlet>

menu.page.html

<ion-split-pane contentId="menu-content">
  <ion-menu contentId="menu-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle *ngFor="let page of pages" auto-hide="false">
          <ion-item [routerLink]="page.url" routerDirection="root" [class.active]="selectedUrl.startsWith(page.url)">
            {{page.title}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- Adding the header here will not work -->
  <ion-router-outlet id="menu-content" main></ion-router-outlet>
</ion-split-pane>

Я нашел способ заставить его работать на ion-tabs, см. код и рисунок ниже.

Теперь я хотел бы добавить то же поведение для моего зарегистрированного menu page (не зарегистрированного приложения).
Страница меню содержит все страницы, доступные после входа в систему, например:

• вкладки
• • home
• • поиск
• настройка
• о

Например, у меня также есть login page, который не должен иметь заголовка.

tabs.page.html

<ion-tabs>
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>

      <ion-title> Header </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label> Home </ion-label>
    </ion-tab-button>

    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      <ion-label> Search </ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>