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

Posted 2023-03-13

【中文标题】ionic 2 + angular 2 - 选项卡 + 侧边菜单

【英文标题】：ionic 2 + angular 2 - tabs + side menu

【发布时间】：2016-05-24 09:19:09

【问题描述】：

我正在尝试将选项卡和侧边菜单连接在一起，我对自己做错了什么感到困惑。因为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，我不想更改。

【参考方案1】：

目前尚不完全清楚您为什么需要这样做，但这是可能的，并且附加的链接包含我合并模板生成的两个程序的代码。生成的程序使用 tab1 页面作为“入门”页面。每个标签页都提供侧边栏菜单。

我将“tabs”程序的 pages 文件夹中的文件夹复制到“sidemenu”程序中。

从“入门”中，我复制了导航条码和侧栏的菜单。这似乎被包含指定标题的选项卡 2 和选项卡 3 页面继承（不确定原因）。所以我在每个页面中添加了一个带有 tab2 和 tab3 标题的 h1 作为标记。

我修改了app.ts文件以导入步骤1中添加的页面。

我在 app.core.scss 中添加了 import 语句来导入 page1、page2 和 page3 html 文件

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

Merged Sidemenu and Tabs code in ionic 2

【讨论】：

感谢您的回答，我们正在构建 Quran 应用程序，因此我们想显示侧边栏和标签，但仅将标签保留为手势显示（我们希望稍后添加）.. 这就是原因, 我已经下载了该应用程序并将尝试并希望一切顺利。

它在 ios 上运行良好，但在安卓上不显示侧边栏。

我还有一个问题。如果我不想使用rootPage: Type = TabsPage;，但仍想在现有页面上显示选项卡，该怎么办。我怎样才能做到这一点？因为我想在第二页而不是主页上显示标签。

Basit - 我没有在 android 上检查过这个。关于特定页面上的侧边菜单，将以下代码从 tabs.html 移动到特定页面。然后菜单栏将仅显示在该页面上。但是按选择返回总是会带你回到第一页。我确信可以修复代码以返回您想要的任何内容。 Tab 2

Basit - 我尝试使用 'ionic serve -l' 并排显示 android 和 ios。它似乎在两者上都可以正常工作。我没有要检查的安卓设备。