引言
AngularFire2 是一个非常强大的、容易使用的 Angular 库，它可以帮助我们更加高效地与 Firebase 进行交互。而 angularfire2-exp 则是 AngularFire2 的扩展包，它提供了更多的功能。
本文将介绍如何使用 angularfire2-exp 这个 npm 包，并深入地探讨其中的相关知识点，希望对您有所帮助。
安装
首先，我们需要安装 angularfire2-exp：
--- ------- ---------------- ------
接着，还需要安装以下依赖：
--- ------- -------- ---- ------
基本用法
安装完成后，我们需要在 app.module.ts 中引入 AngularFireModule 和 AngularFirestoreModule：
------ - ----------------- - ---- ---------------
------ - ------------------------ - ---- -----------------------
------ - ---------------------- - ---- -------------------------
------ - ----------- - ---- ------------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------------------------------------
-------------------------
-----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在需要使用 angularfire2-exp 的组件中，我们可以像下面这样引入该模块：
------ - ---------- - ---- ------- ------ - --------- - ---- ---------------- ------ - ---------------- - ---- ------------------------- ------ - ------------------ - ---- ----------------------- ------ - ------------------------ - ---- ----------------------- ------ - ------------------- - ---- ------------------------ ------ - --------------- - ---- -------------------- ------ - -------------------------- - ---- ------------------------- ------ - -------------------- - ---- -------------------------
这里我们引入了 Observable、AngularFirestore、AngularFireStorage、AngularFireDatabase、AngularFireAuth、AngularFirestoreCollection 和 AngularFireFunctions 这些模块，并将它们注入到组件的构造函数中：
------------ ------- --- ----------------- ------- -------- ------------------- ------- ---- -------------------- ------- ----- ---------------- ------- ---------- -------------------- - --
AngularFirestoreCollection
AngularFirestoreCollection 是一个 AngularFirestore 中的集合对象。它提供了一个类似数组的界面，我们可以在其中添加、修改、读取和删除文档。
下面是一个示例，它展示了如何使用 AngularFirestoreCollection 获取一个集合中的文档。首先，我们需要定义一个接口来描述我们的数据：
--------- ---- - ----- ------- ------------ ------- -
然后，我们可以声明一个 AngularFirestoreCollection，并使用 valueChanges 方法获取该集合中的数据：
---------------- --------------------------------- ------- ------------------- ------------------- ---- ----------------- -- ---------- - -------------------- - ----------------------------------- ----------- - ------------------------------------ -
在上面的代码中，我们声明了一个 itemsCollection，并在 ngOnInit 中将其初始化为 items 集合。接着，我们调用 valueChanges 方法，将其返回值 items$ 赋值给我们的 Observable。
AngularFirestoreDocument
AngularFirestoreDocument 是 AngularFirestore 中的文档对象。它提供了添加、修改、读取和删除文档的方法。
下面是一个示例，它展示了如何使用 AngularFirestoreDocument 读取、修改和删除一个文档。首先，我们需要定义一个接口来描述我们的数据：
--------- ---- - ----- ------- ------------ ------- -
然后，我们可以声明一个 AngularFirestoreDocument，并使用 valueChanges 方法获取该文档中的数据：
-------- ------------------------------- ------ ----------------- ------------------- ---- ----------------- -- ---------- - ----- -- - -------------------- ------------ - ---------------------------------- ---------- - ---------------------------- -
在上面的代码中，我们声明了一个 itemDoc，并在 ngOnInit 中将其初始化为 items 集合中的文档。接着，我们调用 valueChanges 方法，将其返回值 item$ 赋值给我们的 Observable。
在介绍完了基本用法后，我们来看看 angularfire2-exp 中的一些高级用法。
高级用法
AngularFirestoreDocumentId
AngularFirestoreDocumentId 是一个注入器，可以获取当前文档的 ID。
下面是一个示例，它展示了如何使用 AngularFirestoreDocumentId 获取当前文档的 ID：
------ - --------- - ---- ----------------
------ - ----------------- -------------------------- - ---- -------------------------
------ - ---------- - ---- -------
--------- ---- -
----- -------
------------ -------
-
------------
--------- -----------
--------- -
------ ----- - ----- - ---- -------
----- -- ------
-
--
------ ----- ------------- -
------ -----------------
--- -------
------------
------- ---- -----------------
------- ----------- --------------------------
- - -
---------- -
------- - -------------------
---------- - ------------------------------------------------------
-
-在上面的代码中，我们注入了 AngularFirestoreDocumentId，并在 ngOnInit 方法中获取了当前文档的 ID。
AngularFireStorageUploader
AngularFireStorageUploader 是 angularfire2-exp 中的一个模块，它可以帮助您上传和下载文件。
下面是一个示例，它展示了如何使用 AngularFireStorageUploader 上传文件：
------ - --------- - ---- ----------------
------ - -------------------------- - ---- -----------------------
------------
--------- -------------
--------- -
------ ----------- ---------------------------- --
-
--
------ ----- --------------- -
--------- ---------------------------
------------------- ---------- ------------------- -
------------- - --------------------------------
-
-在上面的代码中，我们注入了 AngularFireStorageUploader，并在构造函数中初始化了我们的上传器。在组件的模板中，我们可以添加一个文件选择框，并在 change 事件中调用 uploader.upload() 方法上传文件。
结语
本文介绍了 angularfire2-exp 的基本用法和高级用法，希望对您有所帮助。如果您想深入了解 angularfire2-exp 这个库，建议您阅读官方文档或查看该库的源代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600560b481e8991b448defc4