angular - ionic 2 beta 8 设置根页面无法导航

Question

我正在尝试根据用户是否登录来设置根页面。该应用程序不会导航到我想要的页面。但是如果我换到另一个页面，它就可以工作了。所以我认为我正在导航到的页面一定有问题，但我似乎无法弄清楚。

应用.ts:

import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {StartPage} from './pages/startPage/startPage';
import {LoadingScreen} from './pages/loadingScreen/loadingScreen';
import {AuthService} from './services/AuthService';

@Component({
  template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
  queries: {
    nav: new ViewChild('content')
  }
})

export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform, private auth: AuthService) {

    this.rootPage = LoadingScreen;

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


  }

  initialize() {

      this.auth.loggedIn().then(isLoggedIn => {

          console.log(isLoggedIn);
          if (isLoggedIn) {

              //This works
              this.nav.setRoot(TabsPage);

          } else {

              //This doesn't work, but if I change the page to TabsPage it works
              this.nav.setRoot(StartPage);

          }

      });

  }
}

ionicBootstrap(MyApp, [AuthService], {
  backButtonText: 'Back'
}) 

StartPage.ts:

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

@Component({
  templateUrl: 'build/pages/startPage/startPage.html'
})

export class StartPage {


  constructor(private nav: NavController) {

  }

  login(){

    this.nav.push(LoginPage);

  }

}

StartPage.html:

<ion-content class="startPage" scroll="false">
  <div>
    <h1 class="startTitle">Flurn</h1>
  </div>
  <div class="button-bottom" bottom>
    <button class="button button-block button-light"  (click)="login()">
                Login
            </button>
    <button class="button button-block button-light" style="color:#019688;" disabled (click)="signup()">
                Signup
            </button>
  </div>
</ion-content>

我在我的网络浏览器的控制台中没有收到任何错误...我做错了什么？

Answer 1

嗯，我创建了这个 plunker使用您的代码(没有身份验证逻辑)和 StartPage(在 plunker 中名为 Page1)似乎工作正常。

你的 StartPage.ts 和我的 page1.ts 之间的唯一区别是这个页面导入:

import {LoginPage}from '../loginPage/loginPage';

和 login() 方法:

login(){
    this.nav.push(LoginPage);
}

如果您在这些代码行之前添加一个 debugger; 并按照代码逐步调试(在 chrome 中使用 f11)，会发生什么情况？

//This doesn't work, but if I change the page to TabsPage it works
this.nav.setRoot(StartPage);