如何在Angular订阅firebase快照？

Question

我正在尝试获取我的 firestore 数据库 (v9) 的实时更新。 我在 Angular 中设置了一项服务，我想在其中对我的数据库执行 onSnapshot 调用，但我不知道如何将此快照发送到我的组件并在组件中获取实时更新。

这是我的服务

import { Injectable } from '@angular/core';
import { doc, getFirestore, onSnapshot } from 'firebase/firestore';

@Injectable({
    providedIn: 'root'
})
export class GameService {
    private db;

    constructor() {
        this.db = getFirestore();
    }

    async getGame(code: string) {
        const gameDoc = doc(this.db, 'games', code);
        return onSnapshot(gameDoc, (res) => res.data());
    }
}

这是我的组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GameService } from 'src/services/game.service';

@Component({
    selector: 'app-game',
    templateUrl: './game.component.html',
    styleUrls: ['./game.component.css']
})
export class GameComponent implements OnInit {
    game: any;

    constructor(private _activatedRoute: ActivatedRoute, private _gameService: GameService) { 
        this.getGame();
    }

    ngOnInit(): void {}

    async getGame() {
        this._activatedRoute.params.subscribe(async (parameters) => {
            let gamecode = parameters['code'];
            let snapshot = this._gameService.getGame(gamecode).then(res => {
                console.log(res.data());
            });
        })
    }
}

我尝试了多种方法将数据从服务发送到我的组件，但似乎没有任何效果。 关于如何做到这一点的任何想法？ 非常感谢你

Answer 1

您可以创建一个 Observable（或其他类似结构）来执行此操作。 我建议从 RXJS 创建一个 BehaviorSubject。您可以在您的服务中创建一个属性，例如：

public message$: BehaviorSubject<any> = new BehaviorSubject(null);

您在“onSnapshot”中使用它通过 message$ 属性发送传入数据，如下所示：

async getGame(code: string) {
    const gameDoc = doc(this.db, 'games', code);
    onSnapshot(gameDoc, (res) => this.message$.next(res.data()));
}

有了这个，您已经在将数据传输到快照中，现在您只需要在组件中访问此可观察对象即可接收所需的数据。 所以在你的组件中你可以这样做：

private subject = new Subject<void>();
ngOnDestroy() {
  this.subject.next();
  this.subject.complete();
}
async getGame() {
    this._activatedRoute.params.subscribe(async (parameters) => {
        let gamecode = parameters['code'];
        this._gameService.getGame(gamecode);
        this._gameService.message$.pipe(takeUntil(this.subject))
         .subscribe((newData) => {
           // YOUR NEW DATA
         });    
    });
}

请注意 pipe “takeUntil” 来自 RXJS 并且是出于性能原因，以确保当您的组件被销毁时您的 observable 也被销毁（避免 memory 泄漏）。