如何在Angular 8+中使用Firebase的onSnapshot函数

npm install firebase

ng generate service firebase

import { Injectable } from '@angular/core';
import firebase from 'firebase/app';
import 'firebase/firestore';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  private firebaseConfig = {
    // Firebase配置信息
  };

  private firebaseApp: firebase.app.App;
  private firestore: firebase.firestore.Firestore;

  constructor() {
    this.firebaseApp = firebase.initializeApp(this.firebaseConfig);
    this.firestore = this.firebaseApp.firestore();
  }

  // 其他Firebase相关操作方法
}

import { Injectable } from '@angular/core';
import firebase from 'firebase/app';
import 'firebase/firestore';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  // ...

  listenToCollectionChanges(collectionName: string) {
    this.firestore.collection(collectionName).onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          // 处理新增数据
        }
        if (change.type === 'modified') {
          // 处理修改数据
        }
        if (change.type === 'removed') {
          // 处理删除数据
        }
      });
    });
  }

  // 其他Firebase相关操作方法
}

import { Component, OnInit } from '@angular/core';
import { FirebaseService } from 'path-to-firebase-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor(private firebaseService: FirebaseService) {}

  ngOnInit() {
    this.firebaseService.listenToCollectionChanges('myCollection');
  }
}