在 Angular 中使用 Observer 作为 Observable

Posted 2023-03-13

【中文标题】在 Angular 中使用 Observer 作为 Observable

【英文标题】：Using Observer as an Observable in Angular

【发布时间】：2018-10-08 05:25:24

【问题描述】：

我只是对 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'] 左右，但这并不总能保证返回的值是最新的。

提前致谢！

【参考方案1】：

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

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));

【讨论】：

它仍然无法正常工作，在组件中它总是说数据未定义。

那么你在获取数据时遇到了问题。

不，我实际上是在使用上述代码在提供程序中正确获取数据。但我无法使用您的代码将此数据传输到其他组件。

对不起，我不相信你。这应该有效。如果没有，请使用模拟数据创建minimal reproducible example 来证明这一点。