离子和带选项卡和SideMenu的角度应用程序

时间:2017-07-14 01:37:12

标签: angular ionic-framework ionic2 ionic3

我使用Tabs模板启动了我的第一个Ionic应用程序,我想添加一个可在所有6个选项卡页面上使用的导航栏侧面菜单。

我花了好几个小时遇到一些问题,但我遇到的问题是它无法找到StatusBar或SplashScreen插件。

我尝试了几种不同的方法来获取侧边菜单,但我正在尝试的方法让我最远。也赞赏任何替代方法。

app.components.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import {NewsfeedService} from './services/newsfeed.service'

import { NewsPage } from '../pages/news/news';
import { PlayersPage } from '../pages/players/players';
import { TeamsPage } from '../pages/teams/teams';

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

@Component({
  templateUrl: 'app.html',
  providers: [NewsfeedService]
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage:any = TabsPage;
  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Homepage', component: NewsPage },
      { title: 'Team Research', component: TeamsPage },
      { title: 'Player Research', component: PlayersPage }
    ];

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

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
    statusBar.styleDefault();
    splashScreen.hide();

    });
  }
  }

app.component.html

<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
                {{p.title}}
            </button>
        </ion-list>>
    </ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

0 个答案:

没有答案