具有默认页面的离子选项卡不在选项卡的堆栈中

Question

我花了很多时间来解决这个问题。

我有一个Ionic 3应用，其中一些页面在登录前可以访问，而其他页面在登录后可以访问。在我的app.component中，我有以下代码：

  

app.component.ts

@Component({
templateUrl: 'app.html'
})

export class MyApp {
@ViewChild('rootNav') nav: NavController;

constructor(platform: Platform, statusBar: StatusBar,
            splashScreen: SplashScreen,
            private authService: AuthService,
            public translate: TranslateService) {
    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();
    });


    /* IF LOGGED IN GO TO HOMEPAGE */
    this.authService.isLoggedIn().then(data => {
        if (data) {
            this.nav.setRoot(TabsPage); // Another solutions is this.nav.setRoot(HomePage); but including tabs in the homepage returns error
        } else {
            this.nav.setRoot(LandingPage);
        }
    });
  }
}

这很好用，但是问题来了。我需要4页，其中一个是“主页”（为登录的人显示），另外3个页面可通过单击Tab键访问。

  

tabs.component.ts

@Component({
  templateUrl: 'tabs.html'
}) 
export class TabsPage {
  @ViewChild('tabRef') tabRef: Tabs;
  root: TabsPage;
  tab1Root = HowItWorksPage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

  

tabs.component.html

<ion-tabs #tabRef>
     <ion-tab [root]="tab1Root" [tabTitle]="'requests' | translate" tabIcon="icon-requests"></ion-tab>
     <ion-tab [root]="tab2Root" [tabTitle]="'offers' | translate" tabIcon="icon-offers"></ion-tab>
     <ion-tab [root]="tab3Root" [tabTitle]="'services' | translate" tabIcon="icon-services"></ion-tab>
</ion-tabs>

我不能做的是在首页中显示选项卡页面而不会出错，或者作为另一种解决方案，将首页加载为默认选项卡（即使首页不在选项卡堆栈中）。我想遇到这种情况：

谢谢！