Angular 和 Firebase - 自动数据库恢复答案

【问题标题】：Angular and Firebase - Automatic database recoveryAngular 和 Firebase - 自动数据库恢复
【发布时间】：2019-07-31 23:24:37
【问题描述】：

我尝试创建一个网站，为我的学校作业提供文本课程。我已经完成了认证和课程备份。现在，我尝试创建一个实时聊天。但是，当我更改数据库时，需要重新加载网站才能进行更改。如何在不重新加载的情况下做到这一点？

我的服务加载脚本：

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable()
export class CoursService {
  liste_cours = []

  constructor(private httpClient: HttpClient) {
    this.getCoursFromServer()
  }

  saveCoursToServer() {
    this.httpClient
      .put("https://databaselink/cours.json", this.liste_cours)
      .subscribe(
        () => {
          console.log("Enregistrement terminé!");
        },
        error => {
          console.log("Erreiorr ! : " + error);
        }
      );
  }

  getCoursFromServer() {
    this.httpClient
      .get<any[]>("https://databaselink/cours.json")
      .subscribe(
        response => {
          this.liste_cours = response;
          console.log("Loading finish");
        },
        error => {
          console.log("Error!: " + error);
        }
      );
  }
}

感谢您的回答！

【问题讨论】：

标签： angular database typescript firebase reload

【解决方案1】：

您似乎正在通过向 Firebase 实时数据库发出 HTTP 请求来访问它。这意味着您在进行 HTTP 调用时会获取当前数据，但之后不会收到对数据的更新。当您重新加载页面时，您将再次获得最新数据。

有几种方法可以让您的页面在数据更改时自动更新，而无需用户重新加载页面。

使用 Firebase SDK。这是迄今为止最简单的方法，因为 Firebase 具有适用于普通 JavaScript 和 Angular 应用程序的 SDK。集成这些 SDK 后，您可以通过attaching an on('value' listener 或subscribing to the node 获取实时更新。
在您的页面中定期执行 HTTP 请求，这称为轮询数据。这也是一种非常简单的方法，但如果您的数据不经常更改，则效率会非常低。
为 Firebase 的流式传输 REST API 实现客户端。这相当复杂，通常只能在没有 Firebase SDK 的平台上完成，或者由想要了解有关该协议的更多信息的爱好者完成。

我强烈建议您按照给出的顺序考虑这些解决方案。

【讨论】：