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

Question

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

“@角/火”：“^ 6.1.5”，
“firebase”：“^ 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”，“@角度/火”：“^ 7.0.4”，

而新的变化是

服务.ts

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

和组件.ts

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

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

正如这里所描述的 ，看起来我必须在组件文件中管理它。它是唯一的选择吗onSnapshot？

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

Answer 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 仍然很新，但随着时间的推移，它肯定会有所改进。