Ionic 4 - держать вкладки видимыми во всем приложении

Question

У меня есть приложение с 3 вкладками (Домой, О, Контакты).У меня есть меню, которое содержит ссылку на элемент «Новости», на этой странице отображается список новостей.На домашней странице также отображается список новостей.

Я хочу, чтобы вкладки были видны в разделе «Новости и новости».

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

Когда я открываю новостную страницу из меню, домашние вкладки остаются выбранными, так как они используют outlet: home.Можно ли сохранить вкладки видимыми в новостях другим способом?и даже, как не сохранять выбранные домашние вкладки, если я перейду к подробностям новостей со страницы новостей.

tabs.page.html

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

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 { NewsPage } from '../news/news.page';
import { NewsDetailsPage } from '../news/news-details/news-details.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'news',
        outlet: 'home',
        component: NewsPage
      },
      {
        path: 'news/news-details/:id',
        outlet: 'home',
        component: NewsDetailsPage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

app.component.html

<ion-app>
  <ion-menu type="overlay">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>
      <ion-list>
        <ion-menu-toggle auto-hide="false">
          <ion-item href="/tabs/(home:news)">
            <ion-icon slot="start"></ion-icon>
            <ion-label>
              News
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true">
      <ion-label>{{n.name}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

news.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      News
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true">
      <ion-label>{{event.name}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>