Angular 使用ionic 3和ionic 4将导航页面推送到选项卡页面

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

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

应用程序组件

应用程序模块

home.ts

Login.ts

Tab.html

所以我想知道如何在爱奥尼亚3中通过普通页面将导航推送到选项卡页面

---

您可以按如下所示进行尝试。请执行以下更改，然后重试

home.ts

login.ts

---

仅获取空白页。我无法访问该网站。无论如何，我会进一步检查并更新您@sampath谢谢。我没有在app.module.ts@NgModule中添加选项卡页面名称列表。谢谢Sampath。

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

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 {}

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

  }

}

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

  }

}

}

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

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

}

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

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