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

Question

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

Lemme explain my codebase below.

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

  }

}

Login.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');
  }

}

So I want to know How to push navigation by normal page to tab page in 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);
  }