具有相同侧菜单的 Ionic 2 选项卡模板

Question

仍然来自here，

我正在尝试将选项卡模板与侧边菜单混合使用，并且我希望侧边菜单可用于所有选项卡，而无需重复代码。

实际上，我完全是 Ionic 的新手，我深入研究了 Ionic 2。

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

编辑 app.component.ts 看起来像这样

从 '../pages/tabs/tabs' 导入 { 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>

希望对你有所帮助。