ionic 2 + angular 2 - 选项卡 + 侧边菜单

Question

我正在尝试将选项卡和侧边菜单连接在一起，但我对自己做错了什么感到困惑。因为 root 属于 sidemenu..

import {App, IonicApp, Platform} from 'ionic-framework/ionic';

import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {TabsPage} from './pages/tabs/tabs';


// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type} from 'angular2/core';


@App({
  templateUrl: 'build/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  // make HelloIonicPage the root (or first) page
  rootPage: Type = HelloIonicPage;
  pages: Array<{title: string, component: Type}>;

  constructor(private app: IonicApp, private platform: Platform) {

    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage },
      { title: 'testing tabs', component: TabsPage}
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      // Keyboard.setAccessoryBarVisible(false);
      //
      // For example, we might change the StatusBar color. This one below is
      // good for dark backgrounds and light text:
      // StatusBar.setStyle(StatusBar.LIGHT_CONTENT)
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}

我是 ionic 的新手，我已经遵循了以下教程 http://ionicframework.com/docs/v2/getting-started/tutorial/

它有选项卡或侧边菜单，但两者都没有。我已经导入了标签页，但我不确定下一步该怎么做，因为 rootPage 属于 HelloIonicPage，我不想更改它。

Answer 1

目前还不完全清楚您为什么需要这样做，但这是可能的，附件 link 包含我合并模板生成的两个程序的代码。生成的程序使用 tab1 页面作为 'Getting Started' 页面。每个标签页都提供侧边栏菜单。

我把'tabs'程序的pages文件夹里的文件夹复制到'sidemenu'程序里了
从 'Getting Started' 我复制了导航条码和侧边栏的菜单。这似乎是由包含指定标题的选项卡 2 和选项卡 3 页面继承的（不确定原因）。所以我在每个页面中添加了一个带有 tab2 和 tab3 标题的 h1 作为标记。
我修改了 app.ts 文件以导入在步骤 1 中添加的页面。
我在 app.core.scss

该方法可能允许在侧边栏上添加登录屏幕和其他实用程序屏幕（例如搜索）。

Merged Sidemenu and Tabs code in ionic 2

ionic 2 + angular 2 - 选项卡 + 侧边菜单

ionic 2 + angular 2 - tabs + side menu

angularjs

typescript

ionic-framework

ionic-view

ionic2