Проблема объединения вкладок и бокового меню в дочерних компонентах - PullRequest
Новая
       16

Проблема объединения вкладок и бокового меню в дочерних компонентах

0 голосов
/ 10 октября 2019

Итак, я хочу объединить мои sidemenu и вкладки на всех дочерних маршрутах из sidemenu . Я много читал, но пока не могу сделать свои дела ...

Я создал отдельный компонент под названием «Нижний колонтитул» (это кнопка вкладок), затем, когда я вызываю его из 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',
  },
];

1 Ответ

0 голосов
/ 10 октября 2019

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',
  },
];
...