在 Angular 4 中以正确的顺序调用服务？

Question

这是我的项目布局：

这里是返回用户ID的用户数据服务函数：

get uid(): BehaviorSubject<string> {
    const uidSubject: Subject<string> = new Subject<string>();
    this.afAuth.authState.subscribe((data) => {
      uidSubject.next(data.uid);
    });
    return uidSubject;
  }

然后这里是用户任务服务，它使用之前服务的 ID 获取任务：

  get tasks(): BehaviorSubject<string> {
    const tasksSubject: BehaviorSubject<string> = new BehaviorSubject<string>('no tasks available');
    this.afs.collection(`users/${this.uid}/tasks`).valueChanges().subscribe(tasks=> {
      if (tasks.length !== 0) {
        tasksSubject.next(tasks);
      }
    });
    return tasksSubject;
  }

然后我在 App 组件中订阅以从任务服务获取数据，但用户 ID 显然是 undefined，因为任务函数在 uid 函数之前被调用。

那么如何确保用户数据服务在调用任务服务之前获得uid？

Answer 1

我想一个解决方案是使用 Observable 的flatMap。 像这样的东西（我重写了你的代码，但我无法测试它）

get uid(): BehaviorSubject<string> {
  const uidSubject: Subject<string> = new Subject<string>();
  return this.afAuth.authState
}

get tasks(uid): BehaviorSubject<string> {
  const tasksSubject: BehaviorSubject<string> = new BehaviorSubject<string>('no tasks available');
  return this.afs.collection(`users/${uid}/tasks`).valueChanges()
}

caller() {
  this.uid().flatMap( data => {
    //pass data as parameter, will be the id
    return this.tasks(data)
  })
  .subscribe( tasks => {
     //do what you need
  })
}

关于这个有这个good thread。