子组件中的选项卡和侧边菜单组合问题答案

【问题标题】：Problem combining tabs and sidemenu in child components子组件中的选项卡和侧边菜单组合问题
【发布时间】：2020-02-07 13:49:53
【问题描述】：

所以我想在 sidemenu 的所有子路由中合并我的 sidemenu 和选项卡。我已经阅读了很多，但我还不能完成我的工作......

我创建了一个名为 footer 的单独组件（它们是选项卡按钮），然后当我从 sidemenu as 调用它时，页脚显示并正常工作，但如果我这样做，sidemenu 将停止工作..（它不会单击或拖动时显示）

这是我的代码：

FOOTER.COMPONENT

<ion-tabs>
    <ion-tab-bar color="dark" slot="bottom">
        <ion-tab-button tab="tab1">
            <ion-icon name="home"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="tab2">
            <ion-icon name="fitness"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="tab3">
            <ion-icon name="ios-podium"></ion-icon>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

SIDEMENU.HTML

<ion-split-pane>
    <ion-menu contentId="content">

        <ion-header>
            <ion-toolbar color="dark">
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <!-- <app-header></app-header> -->


        <ion-content>
            <ion-list>
                <ion-menu-toogle auto-hide="true" *ngFor="let p of pages">
                    <ion-item [routerLink]="p.url" routerDirection="root" [class.active.item]="selectedPath.startsWith(p.url)">
                        <ion-label>
                            {{p.title}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toogle>
                <ion-item tappable routerLink="/login" routerDirection="root">
                    <ion-icon name="log-out" slot="start">

                    </ion-icon>
                </ion-item>
            </ion-list>
        </ion-content>

    </ion-menu>

    <ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
<app-footer></app-footer> // **If I comment this, My sidemenu works fine again**

SIDEMENU.MODULE

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#Tab1PageModule',
      },
      {
        path: 'tab2',
        loadChildren: '../tab2/tab2.module#Tab2PageModule',
      },
      {
        path: 'tab3',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      },
      {
        path: 'historico-usuario',
        loadChildren: '../historico-usuario/historico-usuario.module#HistoricoUsuarioPageModule'
      },
    ],

  },
  {
    path: '',
    redirectTo: '/menu/tab1',
  },
];

【问题讨论】：

你能创建 stackbliz 工作演示吗？
为什么要将页脚放在拆分窗格之外？您应该将它放置在将在路由器加载中加载的每个组件中。
检查这个回购：github.com/Saqib92/ionic-4-Sidemenu-with-Tabs

标签： angular ionic-framework routes tabs

【解决方案1】：

SIDEMENU.MODULE

const routes: Routes = [
  {
    path: '',
    component: MenuPage
  }
];

TABS.ROUTER.MODULE

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#Tab1PageModule',
      },
      {
        path: 'tab2',
        loadChildren: '../tab2/tab2.module#Tab2PageModule',
      },
      {
        path: 'tab3',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      },
      {
        path: 'historico-usuario',
        loadChildren: '../historico-usuario/historico-usuario.module#HistoricoUsuarioPageModule'
      },
    ],

  },
  {
    path: '',
    redirectTo: '/menu/tab1',
  },
];

【讨论】：