Изменить 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 для перенаправления пользователей, которые уже вошли на страницу входа в систему.

Answer 1

Необходимо изменить код следующим образом:

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 2

Вы должны установить userdata после входа в систему и очистить при выходе из системы. и при настройке rootPage вы можете проверить, существуют ли пользовательские данные или нет. И на initializeApp функция app.component.ts

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

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

Answer 3

в app.component.ts

rootPage: any; ошибка, вы можете использовать rootPage: any = 'targetPage';

, если вы используете меню rootPage: any = 'menuPage'; и выбрали rootPage в menuPage.ts;

export class MenuPage {

  rootPage = 'targetPage';