在菜单端的视图中添加选项卡组件

Question

我想在带有菜单面的视图中添加标签组件。我的问题是该应用程序有2个不同的菜单，我不知道如何插入标签和菜单。

这是我的代码：

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MenuPage } from './../pages/menu/menu';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage:any = MenuPage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
        });
    }
}

menu.html

<ion-menu [content]="eventMenu" id="home">
    <ion-header no-border>
        <ion-toolbar color="primary">
        <ion-item color="none" class="item-header">
            <ion-thumbnail item-left>
                <img src="">
            </ion-thumbnail>
            <h2 style="text-align: left">João Carlos</h2>
            <p style="text-align: left">joao.carlos@gmail.com</p>
        </ion-item>
        </ion-toolbar>
    </ion-header>

    <ion-content class="background">
        <ion-list>
            <ion-item menuClose detail-none (click)="openPage(homePage)">Principal</ion-item>
            <ion-item menuClose detail-none (click)="openPage(settingsPage)">Configurações</ion-item>
            <ion-item menuClose detail-none (click)="openPage(invitePage)">Indique um Amigo</ion-item>
            <ion-item menuClose detail-none (click)="openPage(helpPage)">Ajuda</ion-item>
            <ion-item menuClose detail-none (click)="openPage(aboutPage)">Sobre</ion-item>
            <ion-item menuClose detail-none (click)="openPage(loginPage)">Sair</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-menu [content]="eventMenu" id="event">
    <ion-header no-border>
        <ion-toolbar color="primary">
        <ion-item color="none" class="item-header">
            <ion-thumbnail item-left>
                <img src="">
            </ion-thumbnail>
            <h2 style="text-align: left">João Carlos</h2>
            <p style="text-align: left">joao.carlos@gmail.com</p>
        </ion-item>
        </ion-toolbar>
    </ion-header>

    <ion-content class="background">
        <ion-list>
            <ion-item menuClose detail-none (click)="openPage(homePage)">Principal</ion-item>
            <ion-item menuClose detail-none (click)="openPage(settingsPage)">Agenda</ion-item>
            <ion-item menuClose detail-none (click)="openPage(invitePage)">Inscrição</ion-item>
            <ion-item menuClose detail-none (click)="openPage(helpPage)">Network</ion-item>
            <ion-item menuClose detail-none (click)="openPage(aboutPage)">Evento</ion-item>
            <ion-item menuClose detail-none (click)="openPage(loginPage)">Acesso Cordenação</ion-item>
            <ion-item menuClose detail-none (click)="openPage(loginPage)">Indique um Amigo</ion-item>
            <ion-item menuClose detail-none (click)="openPage(loginPage)">Sair do Evento</ion-item>
            <ion-item menuClose detail-none (click)="openPage(loginPage)">Ajuda</ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #eventMenu swipeBackEnabled="false"></ion-nav>

menu.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { HomePage } from './../home/home';
import { LoginPage } from './../login/login';
import { SettingsPage } from './../settings/settings';

@Component({
    selector: 'page-menu',
    templateUrl: 'menu.html',
})
export class MenuPage {
    private rootPage;
    private homePage;
    private loginPage;
    private settingsPage;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.rootPage = LoginPage;
        this.loginPage = LoginPage;
        this.homePage = HomePage;
        this.settingsPage = SettingsPage;
    }

    openPage(p) {
        this.rootPage = p;
    }

}

home.ts

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';

import { EventPage } from './../event/event';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, private menuCtrl: MenuController) {

}

ionViewDidLoad() {
    this.menuCtrl.enable(true, 'home');
    this.menuCtrl.enable(false, 'event');
}

imgEvent(){
    this.navCtrl.setRoot(EventPage);
}

}

tabs.html

<ion-tabs>
    <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab1"></ion-tab>
</ion-tabs>

tabs.ts

import { EventPage } from './../event/event';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
    selector: 'page-tabs',
    templateUrl: 'tabs.html',
})
export class TabsPage {
    rootPage:any = EventPage;
    tab1:any = EventPage;

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.tab1 = EventPage;
    }
}

event.ts

import { TabsPage } from './../tabs/tabs';
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController} from 'ionic-angular';

@Component({
    selector: 'page-event',
    templateUrl: 'event.html',
})
export class EventPage {
    rootPage:any = TabsPage;

    constructor(public navCtrl: NavController, public navParams: NavParams, private menuCtrl: MenuController) {
    }

    ionViewDidLoad() {
        this.menuCtrl.enable(false, 'home');
        this.menuCtrl.enable(true, 'event');
    }

}

我尝试了很多但目前还没有成功。