Firebase 是一个结合了实时数据库、身份验证、托管、推送通知和分析功能的全能后端解决方案，被广泛应用于移动端和 Web 端应用的开发过程中。而 firebase-rxjs 这个 npm 包，为 Angular 开发者提供了更加便捷的集成 Firebase 数据库到应用程序的方式。本文将带领读者了解如何使用 firebase-rxjs 包集成 Firebase 数据库到 Angular 应用程序中。
环境配置
在开始使用 firebase-rxjs 包之前，我们需要先进行 Firebase 的注册和配置。可以通过 Firebase 官网https://firebase.google.com/注册账号，创建一个 Firebase 应用程序，并将其配置到 Angular 项目环境中。具体步骤可以参考 Firebase 的官方文档。
当 Firebase 安装完成后，使用以下命令安装 firebase-rxjs：
npm install --save firebase-rxjs
引用
在使用 firebase-rxjs 前，需要先在 TypeScript 文件中引入相关的组件：
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { FirestoreService } from 'firebase-rxjs';其中，AngularFireModule 和 AngularFirestoreModule 用于通过 firebase-angular 包将 Firebase 集成到 Angular 中，而 FirestoreService 则为 firebase-rxjs 提供了与 Firebase 数据库交互的 API 。
初始化 FirestoreService
在引用 firebase-rxjs 后，我们需要在应用程序启动时，初始化 FirestoreService ，并将其注入到应用程序中。在 Angular 项目中，常常将其作为 app.module.ts 文件的提供者，代码如下：
@NgModule({
...
providers: [FirestoreService],
...
})
export class AppModule { }使用 FirestoreService
使用 FirestoreService 的 API 可以非常方便地进行 Firebase 数据库的读写操作，包括增加、删除、查询等。
在 FirestoreService 中设置集合名称
在 Firebase 数据库中，数据存储在集合（collection）中。要获取这些数据，首先需要在 FirestoreService 中设置集合的名称：
private collectionName = 'users';
增加文档
在 Firebase 数据库中，数据以文档（document）形式存储，而 FirestoreService 提供的 addDocument() 方法用于增加文档。以下是添加一条用户数据的示例代码：
addDocument(document: any) {
return this.angularFirestore.collection(this.collectionName).add(document);
}删除文档
要删除 Firebase 数据库中的文档，可以使用 FirestoreService 中的 deleteDocument() 方法。例如，以下代码用于删除指定 ID 的文档：
deleteDocument(documentId: string) {
return this.angularFirestore.collection(this.collectionName).doc(documentId).delete();
}获取文档列表
通过查询 Firebase 数据库，可以轻松地获取文档列表。以下代码演示了如何获取一个集合中所有文档的列表：
getDocumentList() {
return this.angularFirestore.collection<any>(this.collectionName).valueChanges();
}查询单个文档
除了获取文档列表之外，我们还可以查询 Firebase 数据库中特定的文档。以下代码演示了如何查询特定 ID 的文档：
getDocument(documentId: string) {
return this.angularFirestore.collection(this.collectionName).doc(documentId).valueChanges();
}示例代码
最后，这里提供一份完整的 Angular 组件代码作为示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------
------------
--------- -----------
--------- -
-------------
----
--- ----------- ---- -- -------- - -------
-- --------- --
-----
-----
----- -----------------------
-------
----
------ ----------- -------------------------- ------------
--------
------- -------------------------
-------
--
--
------ ----- ------------ -
--------- ----
------- - -
----- ---
--
------------------- ----------------- ----------------- -
------------- - ----------------------------------------
-
--------- -
----- ---- - -
----- ------------------
--
---------------------------------------
-------- -- -
-----------------------
------------ - - ----- -- --
--
-------------- -- ----------------------
-
-结论
通过本文的介绍，我们已经了解了如何使用 firebase-rxjs 这个 npm 包，用于集成 Firebase 数据库到 Angular 应用程序中。希望这份教程能对正在开发 Angular 应用程序的开发者们提供一些帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601781e8991b448de360