离子 2 - ngOnInit 事件 - 获取存储问题

Question

我正在存储中存储用户 ID，并尝试在加载页面时获取存储的 ID。

下面是代码片段

constructor(
  private nav: NavController, 
  private auth: AuthService,
  public clockservice: ClockService,
  private alertCtrl: AlertController,
  private loadingCtrl: LoadingController,
  public storage: Storage
) {
  storage.get('name').then(val => {
    this.username = val; 
  })
  storage.get('id').then(val => {
    this.userid = val;     
    console.log(this.userid);
  })
}
ngOnInit() {    
  console.log("inside");
  console.log(this.userid); 
  getStatus();
}
getStatus() {
  this.showLoading();
  this.clockservice.getinoutstatus(this.userid).subscribe(
    result => {
      if (result.success) {
        // do something here
      } else {
        this.showError("API Error.");
      }
      this.loading.dismiss();
    },
    error => {
      this.showError("API Error.");
    }
  );
}

我面临的问题是在ngOnInit事件中未收到用户ID。控制台日志显示甚至在构造函数中收到用户 ID 之前就调用了 ngOnInit。

控制台日志：

inside
1

如何确保在构造函数中收到的所有获取值之后调用 ngOnInit？

Answer 1

最简单的

解决方案是执行Promise.all以等待检索两个存储值，然后调用getStatus：

ngOnInit() {
  Promise.all([
    this.storage.get('name'),
    this.storage.get('id')
  ])
  .then(([name, id]) => {
    this.username = name;
    this.userid = id;
    getStatus();
  })
  .catch(error => {
    this.showError("Storage Error.");
  });
}

在构造函数中检索存储值是可以的，但是 - 查看实现 - 似乎不应该在ngOnInit之前调用getStatus。因此，将存储调用和承诺链移至ngOnInit