带有同侧菜单的离子2选项卡模板

Question

仍然来自here，

我试图混合标签模板和边菜单，我希望边菜单可以对所有标签，没有重复的代码。

实际上，我是一名新来的Ionic公司的新手，我潜入了Ionic 2。

我从选项卡模板创建了一个新应用程序；现在这个应用程序有四个选项卡：home、contact、map和info，为这些选项卡生成的四个页面具有相同的结构。

编辑 app.component.ts如下所示

从‘./pages/tab/tab’导入{ TabsPage }；

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

  constructor(platform: Platform) {
    ...
  }
}

所以我的home.ts是这样的

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavigationDrawer } from '../drawer/drawer'; // I added this line so that I could include the side-menu on every page

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

export class HomePage {
    constructor(public navCtrl: NavController) {}
}

我的home.html是这样的

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Welcome</ion-title>
        <ion-buttons start left>
            <button menuToggle ion-button small icon-only color="royal">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-menu [content]="drawer">
    <navigation-drawer></navigation-drawer><!-- also in the attempt to bring the side-menu into this home.html -->
</ion-menu>

<ion-nav #drawer></ion-nav>

<ion-content>
    <ion-card></ion-card>
</ion-content>

drawer.ts如下所示

import { Component } from '@angular/core';

@Component({
    selector: 'navigation-drawer',
    templateUrl: 'drawer.html'
})

export class NavigationDrawer {
  constructor() {}
}

drawer.html如下所示

<ion-content>
    <ion-list>
        <button ion-item (click)="itemSelected(item)">
            <ion-icon ios="ios-contact" md="ios-contact" item-left></ion-icon> Profile
        </button>
    </ion-list>
</ion-content>

我的tabs.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="contact"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="location"></ion-tab>
    <ion-tab [root]="tab4Root" tabIcon="info"></ion-tab>
</ion-tabs>

我的tabs.ts

import { Component } from '@angular/core';

import { HomePage } from '../home/home';
import { ContactPage } from '../contact/contact';
import { InfoPage } from '../info/info';
import { MapPage } from '../map/map';

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

export class TabsPage {

  tab1Root: any = HomePage;
  tab2Root: any = ContactPage;
  tab3Root: any = InfoPage;
  tab4Root: any = MapPage;

  constructor() {

  }
}

侧菜单只适用于主屏幕，而不适用于任何其他屏幕。

拜托，谁知道怎么让这件事起作用。请帮帮忙

Answer 1

这比那容易多了。您只需要一个根页面就可以包含侧菜单，我们可以称之为menu.html。

<ion-menu [content]="content" class="sidemenu">
  <ion-content>
    <ion-list no-lines>
      <ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon color="gray" name="{{p.icon}}" item-left></ion-icon>
          {{ 'Menu.' + p.title | translate }}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

和你的menu.ts

[imports here]
@Component({
  templateUrl: 'menu.html'
})
export class Menu {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = tabsPage;

  pages: Array<{title: string, icon: string}>;

  constructor(public platform: Platform) {
    this.pages = [{ title: 'tabs', icon: 'home' }];

  }

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

然后你只需要你的页面，在本例中是一个标签页，tabs.html

<ion-tabs>
  <ion-tab [tabTitle]="tab title" [root]="tab content"></ion-tab>
</ion-tabs>

希望这能帮到你。