离子2 beta 8设置的根页面不会导航

时间:2016-06-15 09:12:30

标签: angular typescript ionic-framework ionic2

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

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>

我的webrowser控制台中没有错误......我能做错什么?

1 个答案:

答案 0 :(得分:1)

嗯我用你的代码创建了这个plunker(没有auth逻辑)和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);