如何在离子2中将标签设置到侧面菜单页面？

Question

我有这段代码

app.componnents.ts

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

  @ViewChild(Nav) nav: Nav;
 pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform){
     this.initializeApp();
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
}
}

app.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

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

tabs.html

<ion-tabs #tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

tabs.ts

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor( public navCtrl: NavController ) {
  }
}

page1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
  <ion-item>
    <ion-label color="primary" fixed>Fixed Label</ion-label>
    <ion-input type="tel" pattern="\d*" maxlength="4" placeholder="Tel Input"></ion-input>
  </ion-item>

</ion-content>

我尝试将tabs添加到sidemenu页面，但几乎失败了。 sidemenu使用完全不同的路由。 知道如何将tabs menu添加到side menu个网页吗？

我在ion-footer中使用了page1.html标记，但它无法正常使用。

<ion-footer>
  <ion-toolbar>
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
  </ion-toolbar>
</ion-footer>

Answer 1

礼， 我在侧边菜单上结合了标签

做了一些工作

https://github.com/jvaranam/Ionic3-Sidemenu-tabs