Ionic 4如何从标签页导航到非标签页保持标签？答案

【问题标题】：Ionic 4 how to navigate from tab page to non-tab page keeping tab?Ionic 4如何从标签页导航到非标签页保持标签？
【发布时间】：2019-01-14 04:26:03
【问题描述】：

在 Ionic 4 中，我有一个带有标签的应用程序（5 页主页、搜索、地图、信息、关税）从搜索页面我导航到详细信息页面，但我想将选项卡菜单保留在详细信息页面上。不知道有没有可能？

如何配置路由？这是我的： app-routing.module.ts

`const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'map', loadChildren: './map/map.module#MapPageModule' },
  { path: 'search', loadChildren: './search/search.module#SearchPageModule' },
  { path: 'station', loadChildren: './station/station.module#StationPageModule' },
  { path: 'info', loadChildren: './info/info.module#InfoPageModule' },
  { path: 'tarif', loadChildren: './tarif/tarif.module#TarifPageModule' }
];`

and my `tabs.router.module.ts`

`const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'search',
        outlet: 'search',
        component: SearchPage
      },
      {
        path: 'map',
        outlet: 'map',
        component: MapPage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'tarif',
        outlet: 'tarif',
        component: TarifPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];`

The station page must be a child page of Search page ?

【问题讨论】：

标签： ionic-framework tabs ionic4

【解决方案1】：

您可以在 app.module.ts 文件中使用此设置。

IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: false
})

【讨论】：

在我看来这个选项在 ionic 4 中不存在

【解决方案2】：

由于离子标签模板具有此配置，可以在同一标签导航堆栈中推送任何详细信息页面。

因此，您可以像下面这样在同一搜索选项卡部分中推送您的详细信息视图。

this.navCtrl.push(DetailPage, { detailId: detailData.id });

通过这样做，您可以将您的详细信息页面推送到相同的标签页中。

希望这会有所帮助！

【讨论】：

【解决方案3】：

您必须使“详细信息”页面成为“选项卡”路由的子级。这可以在标签图标栏中不显示该页面的图标的情况下工作。

在tabs.router.module.ts 的“children”数组中添加一个条目：

 {
    path: 'detail',
    children: [
      {
        path: '',
        loadChildren: '../detail/detail.module#DetailPageModule'
      }
    ]
 },

然后您可以导航到/tabs/detail，例如在离子按钮中或通过[routerLink]="['/tabs/detail']" 类似。

如果你愿意，你也可以在你的app-routing.module.ts中定义一个重定向路由：

 { path: 'detail', redirectTo: '/tabs/detail' }

此解决方案的一个缺点是，当显示“详细信息”页面时，“搜索”页面的标签栏图标不会着色。但这可以通过额外的 CSS 格式来解决。

【讨论】：