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

仍然来自

我正在尝试混合标签模板和侧菜单，我希望侧菜单可以用于所有标签，没有重复的代码

事实上，我是爱奥尼亚的新手，我跳进了爱奥尼亚2

我从选项卡模板创建了一个新应用程序；现在，该应用程序有四个选项卡：

主页

，

联系人

，

地图

，和

信息

为这些选项卡生成的四个页面具有相同的精确结构

编辑 app.component.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) {}
}

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

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

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

export class NavigationDrawer {
  constructor() {}
}

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

从“../pages/tabs/tabs”导入{TabsPage}

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

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

所以我的家是这样的

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) {}
}

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

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

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

export class NavigationDrawer {
  constructor() {}
}

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

我的home.html如下所示

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) {}
}

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

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

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

export class NavigationDrawer {
  constructor() {}
}

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

drawer.html如下所示

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) {}
}

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

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

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

export class NavigationDrawer {
  constructor() {}
}

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

侧菜单仅适用于主屏幕，不适用于任何其他屏幕

---

拜托，谁有办法让它工作呢。请帮忙吧

这比那容易多了。您只需要一个根页面来包含侧菜单，我们可以称之为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>

[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);
  }
}

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

{{“菜单”。+p.title | translate}

和您的菜单。ts：

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

[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);
  }
}

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

[此处导入]
@组成部分({
templateUrl:'menu.html'
})
导出类菜单{
@ViewChild（导航）导航：导航；
rootPage:any=tabsPage；
页面：数组；
建造商（公共平台：平台）{
this.pages=[{title:'tabs'，icon:'home'}]；
}
openPage（第页）{
this.nav.setRoot（page.component）；
}
}

然后你只需要你的页面，在本例中是tabs页面，tabs.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>

[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);
  }
}

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

---

希望这对你有帮助。

比那容易。您只需要一个根页面来包含侧菜单，我们可以称之为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>

[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);
  }
}

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

{{“菜单”。+p.title | translate}

和您的菜单。ts：

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

[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);
  }
}

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

[此处导入]
@组成部分({
templateUrl:'menu.html'
})
导出类菜单{
@ViewChild（导航）导航：导航；
rootPage:any=tabsPage；
页面：数组；
建造商（公共平台：平台）{
this.pages=[{title:'tabs'，icon:'home'}]；
}
openPage（第页）{
this.nav.setRoot（page.component）；
}
}

然后你只需要你的页面，在本例中是tabs页面，tabs.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>

[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);
  }
}

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

---

---

希望这对您有所帮助。

您能在问题中添加根页面吗？请，根页面是什么，在哪里？在app.component.ts中设置了哪些根页面。你能显示那个文件吗？我已经把它包括在我的编辑中了，app.component.ts中指定的根页面是

TabsPage

，即

import{TabsPage}from'../pages/tabs/tabs'

ok你的app.html应该有@fernando在回答中提到的menu.html，并按照他说的继续。它应该可以工作。你能在问题中添加根页面吗？请，根页面是什么，在哪里？在app.component.ts中设置为根的是什么。你能显示那个文件吗？我已经把它包括在我的编辑中了，app.component.ts中指定的根页面是

TabsPage

，即

import{TabsPage}from'../pages/tabs/tabs'

ok你的app.html应该有@fernando在回答中提到的menu.html，并按照他说的继续。我已经有了一个tabs.html，这个文件包含了tabs模板。你是说我应该把你给我的内容作为一个新的标签附加上去吗？所以如果你有标签和根页面，我不知道你有什么问题。谢谢，我让它工作了。很抱歉正如@Suraj所说，我刚刚启动了爱奥尼亚，我所要做的就是将菜单的内容放入app.html文件中，每个选项卡上的按钮都会调用它。谢谢。@FernandoDelOlmo你能帮我解决爱奥尼亚2期吗？我已经有了一个tabs.html，文件中包含了tabs模板。你是说我应该把你给我的内容作为一个新的标签附加上去吗？所以如果你有标签和根页面，我不知道你有什么问题。谢谢，我让它工作了。很抱歉正如@Suraj所说，我刚刚启动了爱奥尼亚，我所要做的就是将菜单的内容放入app.html文件中，每个选项卡上的按钮都会调用它。谢谢。@FernandoDelOlmo你能帮我解决离子2号问题吗