ionic-framework - 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>

主页.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>

新闻.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>

标签： ionic-frameworkangular6ionic4