4

在 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 ?
4

3 回答 3

0

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

IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: false
})
于 2018-08-07T13:02:25.547 回答
0

由于 ionic 选项卡模板具有此配置，可以在同一选项卡导航堆栈中推送任何详细信息页面。

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

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

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

希望这会有所帮助！

于 2018-08-07T13:11:38.880 回答
0

您必须使“详细信息”页面成为“选项卡”路由的子级。这无需在选项卡图标栏中显示该页面的图标即可工作。

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

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

然后您可以导航到/tabs/detail，例如在 ion-button 或类似的地方[routerLink]="['/tabs/detail']"。

如果你愿意，你也可以在你的app-routing.module.ts：

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

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

于 2019-05-10T22:12:01.083 回答