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>

Ionic 4-在我的整个应用程序中保持标签可见

0 个答案: