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-button属性设置的内容如何与路由中的path一致。

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

1 个答案: