Question

仍然来自here，

我正在尝试将标签模板与侧边菜单混合使用，我希望侧边菜单可供所有标签使用，而不需要重复的代码。

实际上，我是Ionic的新手，我潜入了Ionic 2。

我从标签模板中创建了一个新应用;现在这个应用有四个标签：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>

my 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>

希望这会对你有所帮助。

带有相同侧边菜单的Ionic 2标签模板

1 个答案: