使用 Ionic Framework 设置新主页答案

【问题标题】：Setting a new homepage with Ionic Framework使用 Ionic Framework 设置新主页
【发布时间】：2017-06-20 21:49:05
【问题描述】：

我正在使用 ionic 框架来构建和应用。默认情况下，主目录设置为主页，但我已经开始构建，现在想在这个原始主页之前添加一个登录页面。无论如何我可以将新的登录页面设置为应用程序的起始页面吗？谢谢。

【问题讨论】：

标签： angular mobile ionic-framework web-applications ionic2

【解决方案1】：

您可以在您的src/app/app.component.ts 中执行此操作。例如

import { Component } from '@angular/core';
import { LoginPage } from '...';

// other imports

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

  constructor(
    platform: Platform
  ) {
    platform.ready().then(() => {
      StatusBar.hide();
      Splashscreen.hide();
      this.rootPage = LoginPage;    // don't forget to import this page
    });
  }
}

【讨论】：

【解决方案2】：

在 MyApp 中使用 rootPage

export class MyApp {
  rootPage:any = 'YourLoginPage';
}

【讨论】：

【解决方案3】：

对于登录场景，您可以使用 rootPage 属性，

在声明期间，比如

rootPage:any = Dashboard;//import { Dashboard } from '../pages/dashboard/dashboard'

或在方法内，例如

this.rootPage = Dashboard

稍后登录成功后，您可以使用App对象为应用设置rootPage，例如

import { App } from 'ionic/angular'
import { Dashboard } from '../pages/dashboard/dashboaard'


//inject in contructor
constructor(private app:App){}


//then in method where login success is received
login(){
 if(loginValid){
   this.app.getRootNav().setRoot(Dashboard);//in this way you will not have back button for new page
 }
}

希望对您有所帮助。 :)

【讨论】：