ionic 2 side menu and tab is not working after i r

2019-03-05 23:54发布

I am using ionic 2, with login, side menu , tab menus. So after login user will go to dashboard screen with other 2 menus. So my menus are dashboard, about, contact. Now the problem is after i login its going to dashboard screen. But no tab and side menu are showing. Don't know where i am doing wrong.

here my code :

Src/app/app.component.ts :

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


import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

export interface PageInterface {
  title: string;
  component: any;
  icon: string;
  index?: number;
}
@Component({
  templateUrl: 'app.html'
})
export class MyApp {



@ViewChild(Nav) nav: Nav;

  // set our app's pages
  appPages: PageInterface[] = [
  { title: 'Dashboard', component: TabsPage, icon: 'calendar' },
    { title: 'About', component: TabsPage, index: 1, icon: 'information-circle' },
    { title: 'Contact', component: TabsPage, index: 2, icon: 'contacts' }
  ];
  rootPage:any = HomePage;

  constructor(platform: Platform, public menu: MenuController,statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }


  openPage(page: PageInterface) {
    this.menu.close();

    if (page.index) {
      this.nav.setRoot(page.component, { tabIndex: page.index });

    } else {
      this.nav.setRoot(page.component).catch(() => {
        console.log("Didn't set nav root");
      });
    }
  }
}

src/app.app.html

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
        <ion-icon item-left [name]="p.icon"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

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

src/app/app.mosule.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupnamePage } from '../pages/signupname/signupname';

import { DashboardPage } from '../pages/dashboard/dashboard';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { TabsPage } from '../pages/tabs/tabs';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    SignupnamePage,
    DashboardPage,
    AboutPage,
    ContactPage,
    TabsPage

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SignupnamePage,
    DashboardPage,
    AboutPage,
    ContactPage,
    TabsPage

  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

And at last my all menu pages html code are :

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <h2> About this template </h2>

  <p>This Tabs and Menu template was made by Flink91, find it here: <a href="https://github.com/Flink91/ionic2-tabs-and-menu">https://github.com/Flink91/ionic2-tabs-and-menu</a></p>

  <p>My main source was this conference demo from the Ionic team: <a href="https://github.com/driftyco/ionic-conference-app">https://github.com/driftyco/ionic-conference-app</a></p>

</ion-content>

If you want i have attached my source project here : Here

login tap function :

export class LoginPage {
  constructor(public modalCtrl: ModalController) {
  }

public loginbtnTap() {

    let loginModal = this.modalCtrl.create(DashboardPage);
   loginModal.present();

}

}

0条回答
登录 后发表回答