时间戳

首页 > 解决方案 > 在 Angular 中使用 Observer 作为 Observable

angular - 在 Angular 中使用 Observer 作为 Observable

问题描述

我只是对 Angular 的可观察对象和主题感到困惑。我已经搜索过类似的问题，但没有找到满足我需求的正确答案。

假设我有一个可观察的类型变量，它监听 Firestore 中的数据更改并保存更改，如下所示：

export class AcademyProvider {

  public currentAcademy: Observable < any > ;
  private db: any;

  constructor(public http: HttpClient,
    private afs: AngularFirestore,
    private accountProvider: AccountProvider) {
    this.db = firebase.firestore();
  }
  //This method gets the details of the current logged academy
  getCurrentAcademy(academyID): Promise < any > {
    return new Promise((resolve, reject) => {
      this.db.collection("academy").where("id", "==", academyID).onSnapshot(
        (academy) => {
          if (!academy.empty) {
            this.currentAcademy = academy.docs[0].data();
            console.log(this.currentAcademy);
            resolve(academy.docs[0].data());
          } else {
            //academy does not exist
            reject(false);
          }
        },
        //academy error
        (error) => {
          reject(error);
        })

    });
  }
}

现在我想要的是使用相同的 AcademyProvider 从不同的页面（例如播放器或设置页面）收听变量 currentAcademy 的变化。我的意思是，我想使用 currentAcademy 变量作为 Firestore 更改的观察者（目前由上述代码完成），以及其他页面组件监听的 observable。

那可能吗？我遇到了一些使用主题类型的教程，但我无法让它与我的代码一起使用。

注意：我知道我可以像这样从其他页面获取 currentAcademy 变量的值：AcademyProvider.currentAcademy['FieldName'] 左右，但这并不总能保证返回的值是最新的。

提前致谢！

标签： angulartypescriptionic3observablegoogle-cloud-firestore

解决方案

Subject如果您在初始化观察时不关心获取值，请使用 a，如果BehaviorSubject您想在首次订阅观察者时接收值，请使用 a。

public currentAcademy: BehaviorSubject<any> = new BehaviorSubject(null);
public currentAcademy: Subject<any> = new Subject();

在您的订阅中，当您获取数据时，将其传输到您的主题：

this.currentAcademy.next(academy.docs[0].data());

在您的组件中，您现在可以订阅此观察者：

this.myService.currentAcademy.subscribe(data => console.log(data));

推荐阅读