更改RootPage

Question

我是Ionic的新手，我在尝试在Ionic 3上推送根页时遇到问题

在app.component.ts上

import { Component } from '@angular/core';
import { LoginPage } from '../pages/login/login';
import { LoggedinPage } from '../pages/loggedin/loggedin';
import firebase from 'firebase';

@Component({
   template: `<ion-nav [root]="rootPage"></ion-nav>`
 })
export class MyApp {

rootPage: any;

 var state = firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    this.rootPage = LoginPage;
    //console.log(this.rootPage);
    //from here i can see that the this.rootpage is defined.
  } else {
    this.rootPage = LoggedinPage;
  }

   console.log(this.rootPage);
   //the rootpage is not defined outside of the funtion
});
 }

我想做什么，id用于重定向已登录到LoggedIn页面的用户。

Answer 1

app.component.ts中的

rootPage: any;错误，您可以使用rootPage: any = 'targetPage';

如果您使用菜单rootPage: any = 'menuPage';并在menuPage.ts中选择了rootPage;

export class MenuPage {

  rootPage = 'targetPage';

Answer 2

  

需要按照以下方式更改代码：

import {Component, ViewChild} from '@angular/core';
import {Nav} from 'ionic-angular';
import { LoginPage } from '../pages/login/login';
import { LoggedinPage } from '../pages/loggedin/loggedin';
import firebase from 'firebase';

@Component({
   template: `<ion-nav [root]="rootPage"></ion-nav>`
 })
export class MyApp {

  rootPage: any;

  @ViewChild(Nav) nav: Nav;

 var state = firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    this.nav.setRoot(LoginPage);
    //console.log(this.rootPage);
    //from here i can see that the this.rootpage is defined.
  } else {
    this.nav.setRoot(LoggedinPage);
  }

   console.log(this.rootPage);
   //the rootpage is not defined outside of the funtion
});
 }

Answer 3

您应该在登录后设置userdata并在注销时清除。在设置rootPage时，您可以检查userdata是否存在。以及app.component.ts的initializeApp函数

  initializeApp() {
    this.platform.ready().then(() => {

      this.rootPage = localStorage.getItem('userData') ? MyDashboardPage : LoginPage;
    });
  }