【问题标题】:Setting root page in ionic2 and angular2 app based on an asynchronous event基于异步事件在 ionic2 和 angular2 应用程序中设置根页面
【发布时间】:2016-08-08 10:41:49
【问题描述】:

我正在尝试启动一个基本的 ionic2 应用程序,并且想知道我的初始应用程序加载时间是否有问题。如果用户未通过身份验证,我想做的是将起始页面设置为登录页面。

我最初将 rootpage 设置为主页,然后当异步调用从 localstorage 返回时,如果用户未经身份验证,我会将 rootpage 重置为登录页面。但是,这会导致他们看到一个页面然后被发送到另一个页面的地方闪烁。

看来我想做的是在显示任何屏幕之前等待本地存储调用。

我的问题是:就目前的代码而言,在设置根页面之前是否会出现平台就绪触发的错误情况,从而导致某种问题?我应该如何在 Ionic 2 和 Angular 2 中处理这种情况?我应该使 get localStorage 调用同步,还是应该将它填充到另一个事件或方法中,这是 Angular 2 中应用程序或页面生命周期的一部分?

我应该使用某种 observable 还是 await 语法?

export class MyApp {
  rootPage: any;
  local: Storage = new Storage(LocalStorage);

  constructor(platform: Platform) {

    this.local.get('user').then(user => {
      if (user) {
        this.rootPage = TabsPage;
      } else {
        this.rootPage = LoginPage;
      }
    });

    platform.ready().then(() => {
      // Will this ever fire before the rootpage is set?
      StatusBar.styleDefault();

    });
  }
}

【问题讨论】:

    标签: angular ionic2


    【解决方案1】:

    您不需要向本地存储添加异步调用,如本示例所示: https://github.com/RedFroggy/ionic2-nfc-app/blob/master/app/app.ts#L52

    您只需要检查本地存储中的用户存在并将rootPage设置为HomePage或LoginPage即可。

    【讨论】:

    • 此外,在检查此内容时,您可以打开启动画面并在操作完成后手动隐藏它,这样用户就不会知道发生了什么,而不是像下面的答案那样使用虚拟初始页面
    • 问题是Ionic bug...当动态改变rootPage页面的构造函数会被调用两次,在这种情况下MainPage会被调用两次...
    【解决方案2】:

    您可以创建虚拟初始页面(即白色背景、预加载器等)以避免闪烁,然后切换到登录或标签页。

    【讨论】:

    • 只是手动隐藏启动画面而不是有一个虚拟页面(我猜这个操作是在应用程序启动时完成的)。另外,我只是在 txt 文件中写入用户的 ID,而不是本地存储。如果存在则登录并显示主页,如果不显示登录页面
    猜你喜欢
    • 1970-01-01
    • 2017-09-17
    • 2017-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多