Ionic 4 选项卡面板未显示在所有页面上

Question

我正在使用 Ionic 4 开发一个应用程序，页面底部有一个选项卡面板。问题是选项卡面板未显示在所有其他页面上。如何解决这个问题？

Answer 1

跟路由有关系。

假设您将选项卡面板放在名为 的页面中tabs。您想要拥有相同选项卡面板的所有其他页面都必须声明为您tabs页面的子页面。

所以你的tabs.module.ts应该看起来像这样：

const routes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: '',
                redirectTo: 'child1'
            },
            {
                path: 'child1',
                loadChildren: './child1/child1.module#Child1PageModule'
            },
            {
                path: 'child2',
                loadChildren: './child2/child2.module#Child2PageModule'
            },
            {
                path: 'child3',
                loadChildren: './child3/child3.module#Child3PageModule'
            },
        ]
    },
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ]});

然后您可以链接您的子页面，如下ion-tab所示：

  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="child1">
        <ion-label>My child 1</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="child2">
          <ion-label>My child 2</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="child3">
        <ion-label>My child 3</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

tab请注意每个属性中的设置如何与路由中的ion-tab-buttona 一致。path