ionic 2 beta 8 设置根页面无法导航答案

【问题标题】：ionic 2 beta 8 set root page wont navigateionic 2 beta 8 设置根页面无法导航
【发布时间】：2016-10-16 07:27:45
【问题描述】：

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

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

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

【问题讨论】：

标签： angular typescript ionic-framework ionic2

【解决方案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);

【讨论】：