使用 ionic 3 angular 4 将导航页面推送到标签页

Question

我在我的应用程序中使用基于普通页面的登录屏幕，并且在检查有效凭据时必须将用户移动到基于选项卡的页面的主屏幕，但我无法实现这种情况。

让我在下面解释我的代码库。

app.components

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

import { HomePage } from '../pages/home/home';
import { TabPage } from '../pages/tab/tab';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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.module

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 { TabPage } from '../pages/tab/tab';
import { AppointmentPage } from '../pages/appointment/appointment';
import { LocationPage } from '../pages/location/location';
import { ReportPage } from '../pages/report/report';
import { FeedbackPage } from '../pages/feedback/feedback';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    TabPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    TabPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  skipIntroHandler() {

    this.navCtrl.push(LoginPage);

  }

}

登录.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TabPage } from '../tab/tab';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {

// Binding values

public userName: String;
public passCode: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {

this.userName = 'cdc';
this.passCode = 'Cdc';
this.navCtrl = navCtrl;

}

ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}

loginHandler() {

  if(this.userName === 'cdc' && this.passCode === 'Cdc'){

    //this.navCtrl.push(TabPage);
    this.navCtrl.setRoot(TabPage, {});

  }

}

}

Tab.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Tab.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AppointmentPage } from '../appointment/appointment';
import { LocationPage } from '../location/location';
import { ReportPage } from '../report/report';
import { FeedbackPage } from '../feedback/feedback';
/**
 * Generated class for the TabPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-tab',
  templateUrl: 'tab.html',
})
export class TabPage {

  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.tab1Root = AppointmentPage;
    this.tab2Root = LocationPage;
    this.tab3Root = ReportPage;

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TabPage');
  }

}

所以我想知道如何在 ionic 3 中将普通页面的导航推送到标签页？

Answer 1

您可以如下图所示尝试。做以下更改，然后再试一次。

home.ts

 skipIntroHandler() {    
    this.navCtrl.setRoot(LoginPage);
  }

login.ts

constructor(private navCtrl: NavController, private navParams: NavParams) {
    this.userName = 'cdc';
    this.passCode = 'Cdc';
 }

loginHandler() {
  if(this.userName === 'cdc' && this.passCode === 'Cdc'){
      this.navCtrl.setRoot(TabPage);
  }