使用路由解析器在页面加载时解析 Promise

Question

我正在使用 AngularFireAuth 模块通过路由解析在页面加载时将当前用户的 UID 获取到组件，但是 return 组件的展开承诺所需的代码行似乎没有下定决心，留下未兑现的承诺。

edit-profiles 模块的相关路由模块代码：

const routes: Routes = [
  {
    path: '',
    component: EditProfilesComponent,
    resolve: { userUID: UserInfoService },
  },
];

解析器服务代码如下：

export class UserInfoService implements Resolve<any> {
  constructor(public afAuth: AngularFireAuth, public af: AngularFirestore) {}

  async resolve() {
    const user = await this.afAuth.currentUser;
    const userUID = user?.uid;
    return userUID; //returns undefined 
  }
}

我也试过将它作为一个承诺并解决它，但 return 也未定义。代码如下所示：

const promise = new Promise(async(resolve, reject) => {
const user = await this.afAuth.currentUser
const userUID = user?.uid;
resolve(userUID) 

})

然后EditProfiles消费者组件代码为：

export class UserInfoService implements Resolve<any> {
  constructor(public afAuth: AngularFireAuth, public af: AngularFirestore) {}

  async resolve() {
    const user = await this.afAuth.currentUser;
    const userUID = user?.uid;
    return userUID; //returns undefined 
  }
}

我真的不确定如何实现 return 由该组件使用和使用的 userUID 承诺，并显示特定于用户的数据，但我不确定如何实现以确保它在组件实例化之前就存在。

Answer 1

@Bravo 是对的，这是代码设计的问题，事实证明我真正想要的是让页面等到 promise 解决后打印出数据，所以 ngOnInit 需要的是以下代码

ngOnInit(): void {
    this.afAuth.authState.subscribe((user) => {
        if(user) {
            //write logic here to make sure the promise gets resolved
        } else {
            //logic for when the page is getting the information
        }
    })
}

这就是您如何确保从 firebase 发送的承诺得到解决，您订阅 authstate observable，当该 observable returns 为真时，您最终可以从 firebase 检索您需要的信息，那就是我遗漏的关键部分是路由解析器可能不是最好的工具。

使用路由解析器在页面加载时解析 Promise

Resolving Promise on Page Load using route resolver

javascript

promise

angular