Firebase是一个由Google提供的云服务平台，目前已经成为开发者的首选之一。在前端技术中，AngularFire2是一个在Angular中使用Firebase的库。AngularFire2提供了一些便捷的服务和指令来访问Firebase的数据库、身份认证和存储等功能。在Angular应用中使用AngularFire2可以快速而简单地开发出高质量的Web应用。
下面就为大家介绍如何使用AngularFire2来玩转Firebase。
准备
首先，需要在Firebase的官方网站上注册一个免费的账户。注册完毕后，进入控制面板，新建一个项目，并在“Authentication”选项卡中启用“Email/密码”登录方式。
然后，在Angular项目中安装AngularFire2库。使用以下命令：
--- ------- -------- ------------- ------
之后，在Angular项目的app.module.ts中，引入Firebase和AngularFire2库，并初始化Firebase的config。
------ - ----------------- - ---- ----------------
------ - ---------------------- - ---- --------------------------
------ - --------------------- - ---- ---------------------
------ - ----------- - ---- ------------------------------
-- ---
-----------
-------- -
-- ---
------------------------------------------------------------
-----------------------
----------------------
-- ---
--
-- ---
--其中，environment.firebaseConfig是Firebase配置对象。
认证
在Firebase中，可以通过预设的身份认证方法，如“Email/密码”、Google、Facebook、Twitter等，认证用户的身份。在AngularFire2中，可以使用AngularFireAuth服务来处理身份认证。
下面是一个简单的登录组件的实现示例：
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------ - --------------- - ---- ---------------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- -
------ ------ - ---
--------- ------ - ---
------------------- ------- ---------------- ------- ------- ------- --
----- ------- -
--- -
----- ------ - ----- -------------------------------------------------- ---------------
----------------------------
- ----- ------- -
-------------------
-
-
-在该组件中，通过AngularFireAuth服务的signInWithEmailAndPassword方法，使用Email和密码进行登录，并在成功登录后导航到首页。
数据库操作
在Firebase中，可以使用Realtime Database或Cloud Firestore两种数据库。AngularFire2既支持Realtime Database也支持Cloud Firestore。在AngularFire2中，可以使用AngularFirestore服务来操作Cloud Firestore数据库。
下面是一个简单的读取集合数据的示例：
------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------------
------------
--------- ------------
--------- -
----
--- ----------- ---- -- -------
------------- - --------------
-----
-----
--
--
------ ----- -------------- -
------ ------
------------------- ---------- ----------------- --
---------- -
----------------
-
---------- -
------------------------------------------------------------
------ -- -
---------- - -----
--
------- -- -
-------------------
-
--
-
-在上述示例中，首先在构造函数中引入AngularFirestore服务。然后在getUsers函数中，使用collection方法来获取users集合的数据，之后使用valueChanges方法来转化数据为Observable对象，并使用subscribe方法来订阅该Observable对象的结果，最后赋值给组件的users变量。
实时更新
使用Firebase的数据库，我们可以实现实时更新数据显示。在AngularFire2中，可以使用AngularFirestoreCollection和AngularFirestoreDocument来实现实时更新。
下面是一个简单的实时更新的示例：
------ - --------- - ---- ----------------
------ - ----------------- -------------------------- - ---- --------------------------
------ - ---------- - ---- -------
--------- ---- -
----- -------
------ -------
-
------------
--------- ------------
--------- -
----
--- ----------- ---- -- ------ - -------
------------- - --------------
-----
-----
--
--
------ ----- -------------- -
------- ---------------- ---------------------------------
------- -------------------
------------------- ---------- ----------------- --
---------- -
-------------------- - -----------------------------------------
----------- - ------------------------------------
-
-在上述示例中，首先在构造函数中引入AngularFirestore服务。然后，定义User接口，该接口可以描述存储在users集合中的数据，包括每个用户的name和email。接下来，定义了一个usersCollection用来存储users集合数据，并通过collection方法获取该集合数据，定义了一个users$Observable对象，并通过valueChanges方法转化成Observable对象。最后，在模板中使用async管道来将Observable对象转为数据流并输出数据。
结论
通过本文的介绍，我们可以看出，使用AngularFire2来操作Firebase相对比较简单。对于身份认证和数据库操作等应用场景，AngularFire2提供了对应的服务和指令，使开发者可以快速地处理其中的问题。在实际开发中，我们可以参考官方文档，或者使用AngularFire2中的API进行开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671db6df9babaf620fb7c155