angular - Angular 如何处理异步初始化的属性？

Question

我正在尝试从 Angular 服务中获取 AngularFirestoreCollection。 AngularFirestoreCollection 在可观察的订阅中异步初始化。当我尝试从组件获取集合时，我收到错误消息，因为它未定义。

这是我的服务代码:

fokosCollection: AngularFirestoreCollection<Foko>;
myFokos: Observable<Foko[]>;

constructor(auth: AuthService, public afs: AngularFirestore) {

  this.myFokos = auth.user$.switchMap(user => {
    if (user) {
      this.fokosCollection = afs.collection<Foko>('users/' + user.uid + '/fokos');
      return this.fokosCollection.valueChanges();
    }
  });

}

这是我的组件的代码:

 this.myListService.fokosCollection.doc(codeInput).valueChanges().take(1).subscribe(foko => {
   getData(foko)
 });

我尝试制作一个 Subject，在 Collection 初始化时通知组件。当我直接导航到该组件时，这起作用了。但是，如果我从另一个组件导航到此组件，则永远不会调用主题订阅(因为当主题发出集合时订阅不存在)。

这是我尝试过的:

fokosCollection: AngularFirestoreCollection<Foko>;
fokosCollectionSubject = new Subject<AngularFirestoreCollection<Foko>>();
myFokos: Observable<Foko[]>;

constructor(auth: AuthService, public afs: AngularFirestore) {

  this.myFokos = auth.user$.switchMap(user => {
    if (user) {
      this.fokosCollection = afs.collection<Foko>('users/' + user.uid + '/fokos');
      this.fokosCollectionSubject.next(this.fokosCollection);
      ...

然后我将组件的代码更改为:

this.myListService.fokosCollectionSubject.take(1).switchMap(fokosCollection => {
    return fokosCollection.doc(codeInput).valueChanges().take(1);
  }).subscribe(foko => {
    getData(foko)
  });

我可以尝试获取集合，如果它抛出错误，则订阅主题。但是，我认为那不是好的代码。那么，在 Angular 中处理异步数据的最佳做法是什么？

Answer 1

在您的 switchMap 中，如果用户是假的，您不会返回值。你应该归还一些东西。使用 filter 运算符可以防止这种情况。

既然您想知道 fokosCollection 何时初始化，我建议您将它公开为一个可观察对象。

fokosCollection: Observable<AngularFirestoreCollection<Foko>>;
myFokos: Observable<Foko[]>;

constructor(auth: AuthService, public afs: AngularFirestore) {
  this.fokosCollection = auth.user$
    .filter(x => x != null)
    .map(user => afs.collection<Foko>('users/' + user.uid + '/fokos'))
    .shareReplay(1);
  this.myFokos = this.fokosCollection.switchMap(x => x.valueChanges());
}

我添加了 shareReplay(1) 以共享单个基础订阅并向新订阅者重播最后的值。在您的场景中您可能需要也可能不需要，但我发现在公开可能具有多个订阅的可观察对象时我通常需要它。

然后在你的组件中:

this.myListService.fokosCollection.switchMap(x => x.doc(codeInput).valueChanges()).take(1).subscribe(foko => {
   getData(foko)
 });