Ionic 4 Tabs 面板未显示在所有页面上

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)
  ]});

然后您可以 link 您在 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>

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

Ionic 4 Tabs 面板未显示在所有页面上

Ionic 4 Tabs panel not showing on all pages

ionic4