Question

在Ionic 4中，我有一个带有标签的应用程序（共5页，首页，搜索，地图，信息，Tarif）从“搜索”页面，我导航到“详细信息”页面，但我想保留“详细信息”页面上的选项卡菜单。我不知道是否可能？

如何配置路由？这是我的： 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 ?

Answer 1

您可以使用app.module.ts文件中的此设置来完成此操作。

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

Answer 2

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

因此，您可以像下面那样将“详细信息”视图推送到同一“搜索”标签部分。

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

通过执行此操作，您可以将详细信息页面推入同一选项卡页面。

希望这会有所帮助！

Answer 3

您必须使“详细信息”页面成为“标签”路线的子级。此方法无需在标签图标栏中显示该页面的图标即可。

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

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

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

如果愿意，您还可以在app-routing.module.ts中定义重定向路由：

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

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

Ionic 4如何从标签页导航到非标签页保留标签？

3 个答案: