在前端开发中，使用 Angular 开发 Web 应用已经成为了标配。而使用 Firebase 这样的后端解决方案也越来越普遍。extended-angular-firestore npm 包提供了 Angular 和 Firebase 的完美结合，使得在 Angular 中使用 Firestore 数据库变得更加便捷和高效。
安装
首先，我们需要安装该包。你可以使用 npm 或者 yarn 安装：
npm install extended-angular-firestore --save # 或者 yarn add extended-angular-firestore
除此之外，我们也需要在项目中引入 AngularFire2 以及 Firebase：
npm install firebase@6.0.0 --save # 或者 yarn add firebase@6.0.0
在引入之前最好查看下 AngularFire2 的文档并在 Firebase 控制台创建一个 Firebase 项目。
使用
基本结构
在使用 extended-angular-firestore 之前，我们需要定义一个 Firestore 集合的模型。我们可以在我们的模型中定义该集合的所有属性和操作。
例如，下面是一个 User 模型的示例：
-- -------------------- ---- -------
------ ----- ---- -
------ ----------- -------
------ ---------- -------
------ --- ---------------- -
------ --------
-
------ ------------------ ------------------------------------------ -
----- ---- - ---------- -- ---
------ --- ------
---------- ---------------
--------- --------------
---
-
------------------ --------- - --- -
------------------- -------
-
-------------- --------- -
------ -
---------- ---------------
--------- --------------
--
-
-
--------- --------- -
----------- -------
---------- -------
-在该模型中，我们定义了 firstName 和 lastName 两个属性。我们同时也在类中定义了我们的集合名，并且为该模型定义了在 Firestore 中的序列化和反序列化方法。
创建服务
接下来，我们需要创建一个服务用于操作该集合。我们可以使用 ExtendedAngularFirestoreService 来创建一个服务。我们可以在服务的构造方法中注入 AngularFireDatabase，FirestoreService 以及所需类型的集合或者随意可序列化的对象：
-- -------------------- ---- -------
-------------
----------- ------
--
------ ----- ----------- ------- ------------------------------------- -
------------
--- --------------------
---- -----------------
- -
------
---
------------------------------------
-------------------
-----------------
--
-
-再加上 @Injectable() 装饰器，就可以让我们的服务被 Angular 所识别并在应用中使用。
现在，我们可以在我们的组件中注入该服务，并使用该服务来操作 Firestore 中的 Collection。
查询文档
下面是一个查询一个 User 文档的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- ------------------
--------- -
------------------------ ------------------------
--
--
------ ----- ------------------- -
------ ------ -----
------------------- -------- ------------ ------------ --
---------- -
---------------------------------------------------- -- -
--------- - -----
---
-
-这里，我们通过 userService.get() 方法来查询一个文档。我们传递一个文档 ID 并订阅该方法，以获取文档的数据。
查询文档集合
我们也可以使用 userService.list() 方法来获取一个文档列表：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- ----------------
--------- -
----
--- ----------- ---- -- ------------------------- ----------------------
-----
--
--
------ ----- ----------------- -
------ ------ ------ - ---
------------------- -------- ------------ ------------ --
---------- -
----------------------------------------- -- -
---------- - ------
---
-
-在该示例中，我们使用 userService.list() 获取了集合中的所有文档。在我们的模板中，我们通过 *ngFor 来展示所有的文档列表。
更新文档
我们可以使用 userService.update() 来更新一个文档
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- ----------------
--------- -
----- ------------------------
------ ---------------------------- --
------ --------------------------- --
------- ---------------------------
-------
--
--
------ ----- ----------------- -
------ ----- ---- - --- -------
------------------- -------- ------------ ------------ --
---------- -
---------------------------------------------------- -- -
--------- - -----
---
-
------------ -
-----------------------------------
-
-在该示例中，我们通过 userService.get() 获取了一个文档并订阅以获取其最新值。在我们的表单中，我们能够编辑它的属性。当我们提交表单时，需要调用 submitForm() 来更新文档。
创建文档
我们也能够使用 userService.create() 创建一个新文档：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---- - ---- ---------------
------------
--------- ---------------
--------- -
----- ------------------------
------ ---------------------------- --
------ --------------------------- --
------- ---------------------------
-------
--
--
------ ----- ---------------- -
------ ----- ---- - --- -------
------------------- -------- ------------ ------------ --
------------ -
-----------------------------------
--------- - --- -------
-
-在该示例中，我们将用户输入的值存储在 this.user 对象中，以保证其能够被序列化和传输到 Firestore。当我们提交表单时，我们使用 userService.create() 来创建一个新文档，并重新初始化输入表单。
结论
extended-angular-firestore 的目的就是可以帮助开发者便捷地操作 AngularFire2 和 Firestore。在 Angular 中，我们可以通过创建模型来定义我们的集合，并使用该模型来初始化服务，通过使用我们定义的服务来操作 Firestore。
以上是 "npm 包 extended-angular-firestore 使用教程"，希望对您在使用 extended-angular-firestore 上有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737b81e8991b448e96e4