Ionic + Angular 项目中，在 Tab 的 ngOnInit() 里请求用户信息，切换账号后，用户数据没有更新

目录

1. 问题

2. 分析 

3. 解决

4. 扩展

---

1. 问题

Ionic + Angular 项目中，在 Tab 的 ngOnInit() 里请求用户信息

切换账号后，希望重新请求用户数据，但实际上，用户数据没有更新（没重新请求）

ngOnInit() {
    this.getUserInfo();
  }

2. 分析 

在 Ionic 中，tab 渲染成功后，只要应用不重启，tab 就不会销毁，ngOnInit() 就不会重新运行

ionic 生命周期函数 ionViewWillEnter() ：每次进入页面，都会被调用

注意：在 Angular 中，使用 Ionic 生命周期函数，无需从 Ionic 导入，也不需要继承

3. 解决

在 ionViewWillEnter() 中，执行 请求用户信息 的操作

ionViewWillEnter() {
    this.getUserInfo();
}

由于每次进入页面时，都会调用 ionViewWillEnter() ，而用户信息 基本固定不变

因此可以 加缓存，防止请求次数过多

/**
* 获取用户信息
*/
getuserInfo() {
  // 获取缓存的用户数据
  const userInfo = this.commonUtilsService.getUserInfoFromMemory();
  if (userInfo && userInfo.loginName === this.loginName) {
    this.userInfo = userInfo;
  // 和缓存中的用户不同时，发起网络请求获取用户信息
  } else { 
    const params = {
      loginName: this.loginName
    }
      this.myService.getPorsonFile(params, res => {
        const userInfoNew = { ...res.data, loginName: this.loginName };
        this.userInfo = userInfoNew; 
        // 缓存用户数据
        this.commonUtilsService.setUserInfoToMemory(this.userInfo);
      })
    }
}

4. 扩展

ionViewDidLoad	仅在页面创建时触发一次，如果被缓存，下次再打开页面时，则不会触发
ionViewWillEnter	进入页面时触发（每次进入都会触发，无论是否缓存）
ionViewDidEnter	进入页面时触发（所有的异步调用已经执行完毕）
ionViewWillLeave	将要从页面离开时触发
ionViewDidLeave	当离开页面时触发
ionViewWillUnload	页面将要销毁时、页面上元素移除时 触发
ionViewCanEnter	在视图进入之前运行。可以在需要身份验证的视图中，使用它作为“监护”，在视图进入之前需要检查权限
ionViewCanLeave	在视图离开之前运行。可以在需要身份验证的视图中，使用它作为“监护”，在视图离开之前需要检查权限