Question

我如何在side menu中使用tabs 设置 ionic 2，我已在ionic 2内开发了一个应用，但在set Root之后{1}}在tabs 菜单 未加载页面正确对此有何建议？

Answer 1

我在我的应用程序上有一个带有标签视图的侧面菜单，所以我认为这会对你有帮助。

这是我的菜单模板：

<ion-menu [content]="content" class="sidemenu">
  <ion-header>
    <ion-toolbar color="indigo500">
      <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)"
          class="item item-icon-left">
        <ion-icon name="{{p.icon}}"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
  <ion-footer>
    <button menuClose ion-item (click)="logout()">
      Logout
    </button>
  </ion-footer>
</ion-menu>

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

我的标签显示：

<ion-header class="class1">
  <ion-navbar color="indigo500">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>My App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="class2">
  <ion-tabs tabsPlacement="top">
    <ion-tab tabTitle="Snacks" [root]="tab1"></ion-tab>
    <ion-tab tabTitle="Drinks" [root]="tab2"></ion-tab>
    <ion-tab tabTitle="Frozen" [root]="tab3"></ion-tab>
  </ion-tabs>
</ion-content>

我的menu.ts：

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

  rootPage: any = tabscomponent;

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

  constructor(public platform: Platform) {

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'List', component: component1, icon: 'list' },
      { title: 'Settings', component: component2, icon: 'settings' }
    ];

  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

您只需重定向到菜单组件，希望这对您有帮助。

如何在Ionic 2中设置带有标签的侧面菜单？

1 个答案: