如何在所有页面上显示离子标签？答案

【问题标题】：How to display Ionic Tabs on all pages?如何在所有页面上显示离子标签？
【发布时间】：2021-06-23 22:10:48
【问题描述】：

我目前正在使用 Ionic 4 开发移动应用程序。我使用 Ionic CLI 构建它，但我做了一个空白项目。我创建了一些组件（如登录、注册...），然后，我从 Ionic 添加了选项卡。

我的问题是，离子标签只出现在 tabs.router.module.ts 的页面上。如何在所有页面上显示标签？

除了它们，每个组件都在 app-routing.module.ts 中，我尝试将它们剪切并粘贴到 tabs.router.module.ts 中，但我不确定这样做是否好。

tabs.routes.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home-page/tab1.module#HomePageModule'
          }
        ]
      },
      {
        path: 'game/new',
        children: [
          {
            path: '',
            loadChildren: '../game/create-game-page/tab2.module#CreateGamePageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

目前我的选项卡可以正常工作，但我不确定它们是如何完美工作的。感谢您的帮助。

【问题讨论】：

请为第二个问题创建另一个帖子。
我删除了第二个问题:)

标签： ionic-framework tabs ionic4

【解决方案1】：

将您的路由作为子路由添加到选项卡路由器文件中的选项卡将使您实现目标。

【讨论】：

【解决方案2】：

如果您想在每个页面上显示您的标签，请将它们放入您的 app.component.html 文件中。喜欢：

<ion-app>
 <ion-tab-button tab="tab1">
    <ion-label>Label1</ion-label>
    <ion-icon name="search"></ion-icon>
  </ion-tab-button>
  <ion-tab-button tab="tab2">
    <ion-label>Label2</ion-label>
    <ion-icon name="card"></ion-icon>
  </ion-tab-button>
</ion-app>

现在不要忘记在 app-routing.module.ts 中创建路由和路由。

【讨论】：