如何在角度组件和服务中处理firebase 9的onSnapshot答案

【问题标题】：how to handle onSnapshot of firebase 9 in angular component and service如何在角度组件和服务中处理firebase 9的onSnapshot
【发布时间】：2021-11-06 22:09:33
【问题描述】：

我已经完美地运行了我的应用程序

"@angular/fire": "^6.1.5",
“火力基地”：“^8.6.3”，

就像

服务.ts

getUserEventSummary(userId) {
this.firestore.collection(`/user/${userId}/event_summary`).doc('current').snapshotChanges().pipe(
      map(changes => changes.payload.data())
    );
}

组件.ts

this.service.getUserEventSummary(this.userId).subscribe((res: any) => {
    this.values = res;
}

这样的代码遍布整个应用程序。现在我已经转移到最新版本的 firebase 是

"firebase": "^9.0.1", "@angular/fire": "^7.0.4",

新的变化是

service.ts

getUserEventSummary(userId) {
 
 return onSnapshot(doc(db, 'general_lookup', 'onboarding_page'), (document) => {
      return document.data();
  });
}

还有组件.ts

const data = this.homeService.getOnboaringCollection();
console.log(data);

但我在控制台上什么也得不到。

根据here 的描述，看起来我必须在组件文件中管理它。与onSnapshot一起工作是唯一的选择吗？

请帮助我找到比更改组件代码更好的方法。

【问题讨论】：

标签： javascript angular firebase google-cloud-firestore

【解决方案1】：

经过大量挖掘，我找到了以下解决方案，它允许您以与 snapshotChanges 以前类似的方式返回快照。

服务：

import { Injectable } from '@angular/core';
import {doc, docSnapshots, Firestore} from '@angular/fire/firestore';
import {map} from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class ExampleService {

  constructor(private firestore: Firestore) {}

  async getUserEventSummary() {
    const ref = doc(this.firestore, 'general_lookup', 'onboarding_page');
    return docSnapshots(ref).pipe(map(data => data.data()));
  }
}

组件：

import {Component, OnInit} from '@angular/core';
import {ExampleService} from "./services/example.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private service: ExampleService) {}

  async ngOnInit(): Promise<void> {
    const doc$ = await this.service.getUserEventSummary();

    doc$.subscribe(data => {
      console.log(data);
    })
  }
}

不幸的是，由于 Firebase 9 仍然很新，但随着时间的推移它肯定会改进，因此文档不够清晰或深入。

【讨论】：