ionic-framework - 以编程方式更改 Ionic 2 根

Question

我在 Android 上有一个项目，我想动态更改根页面，以确定用户是否已登录。

在 app.component.ts 中。我正在检查本地存储中是否有一个标志，该标志确定用户是否已登录。如果是，则将它们带到第二页并且不显示登录页面。如果不是，它会向他们显示一个登录页面。

我的问题是本地存储 GET 是一个 Promise 并且它在有机会之前完成了 app.component.ts 的构造函数(它转到登录屏幕并显示它)然后当 Promise 完成时它切换到第二个屏幕。如果他们已经登录，我根本不想显示登录屏幕。

我已经尝试了一切，但似乎无法解决这个问题。如何根据本地存储中的值的状态更改加载的根页面？

Answer 1

新的解决方案，现在更加优雅。我只在到达存储并检查它是否应显示主页或登录后以编程方式设置根。

@Component({
    template: `<ion-nav #nav></ion-nav>`
)
export class MyApp {

    @ViewChild('nav') nav: Nav;

    constructor(platform: Platform, storage: Storage) {
        this.storage.get('isLogged').then(logged => {
           if (logged) {
              this.nav.setRoot(HomePage);
           } else {
              this.nav.setRoot(LoginPage);
           }
    });
}

编辑前

不是一个优雅的解决方案，我会继续看看是否有更好的方法，但在我的情况下，我用 *ngIf 推迟了根的展示。

我的 AppComponent 是这样的:

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

  rootPage:any = LoginPage;

  showRoot = false;

  constructor(platform: Platform, storage: Storage) {

    this.storage.get('isLogged').then(logged => {
        if (logged) {
           this.rootPage = HomePage;
        }
        this.showRoot = true;
    });
  }
}