AngularFire 是一个基于 Firebase 实时数据库和 AngularFire 库的数据绑定库，它提供了一些 Angular 模块和服务，可以帮助我们快速开发实时应用程序。使用 AngularFire，我们可以轻松地将 Firebase 实时数据库中的数据与 Angular 应用程序进行绑定，同时也能使用 Firebase 的一些高级特性，如身份验证、实时通知、云存储等。
本文将介绍 Angular 应用程序中如何使用 AngularFire，将分为以下几个部分：
- 安装 AngularFire
- AngularFire 的基础使用
- AngularFire 的高级用法
安装 AngularFire
在开始使用 AngularFire 之前，需要先安装它。幸运的是，安装 AngularFire 很简单，只需要执行以下命令即可：
npm install angularfire2 firebase --save
安装后，还需要在 Angular 应用程序中导入 AngularFire 的模块。打开 app.module.ts 文件，然后添加以下代码：
-- -------------------- ---- ------- ------ - ----------------- - ---- --------------- ------ - ------------------------- - ---- ------------------------ ------ - ----------- - ---- ------------------------------ ----------- -------- - -- --- ------------------------------------------------------ ------------------------- -- -- --- -- ------ ----- --------- - -展开代码
代码中，我们首先导入了 AngularFireModule 和 AngularFireDatabaseModule，然后在 imports 数组中设置了 Firebase 的配置选项，这里的配置选项将使用 Angular 应用程序中的 environment.ts 文件中的 Firebase 配置项。
接下来，我们将介绍 AngularFire 的使用方法。
AngularFire 的基础使用
使用 AngularFire，我们可以快速读取 Firebase 实时数据库中的数据，同时也可以保存和更新数据。下面是一个简单的示例，它展示了如何使用 AngularFire 读取 Firebase 实时数据库中的数据，并将其渲染到 Angular 模板中：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------- - ---- ------------------------ ------ - ---------- - ---- ------- ------------ --------- ----------- --------- - ---- --- ----------- ---- -- ----- - --------- ---- ------- ----- - -- ------ ----- ------------ - ------ ------------------ ------------------- ----------- -------------------- - ---------- - ---------------------------------------- - -展开代码
代码中，我们首先导入了 AngularFireDatabase 和 Observable 模块。在组件的构造函数中，我们创建了一个 items 变量，它将由一个返回 Observable 类型数据的 afDatabase.list() 函数实现，并且这个数据将直接从 Firebase 实时数据库中获取。
在模板中，我们使用 ngFor 指令和 async 管道来遍历 items 中的数据，并将它们显示在一个列表中。
这只是 AngularFire 的基础使用方法，接下来，我们将介绍一些更高级的使用方法。
AngularFire 的高级用法
除了上述基础用法，AngularFire 还提供了一些高级特性，包括身份验证、云存储和实时通知等功能。
身份验证
AngularFire 与 Firebase 身份验证实现无缝连接，这意味着我们可以在 Angular 应用程序中轻松添加身份验证功能。下面是一个示例：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------------- - ---- -------------------- ------ - -- -------- ---- --------------- ------ - ---------- - ---- ------- ------------ --------- ----------- --------- - ---- ------------- -- ---------------- -- ------ ---- -------------- ------- ----------------------- ---- --------------- ------ - -- ------ ----- ------------ - ----- -------------------------- ------------------ ------- ---------------- - --------- - ----------------- - ------- - ------------------------------- ------------------------------------ - -展开代码
代码中，我们首先导入了 AngularFireAuth 和 observable 模块。在组件的构造函数中，我们创建了一个 user 变量，它将返回一个 Observable 类型数据，以获取 Firebase 实时数据库中当前用户的身份信息。
在模板中，我们使用 ngIf 指令显示当前用户的显示名称，如果用户未登录，将显示一个登录按钮。单击登录按钮时，我们将使用 Google 身份验证功能使用 signInWithPopup() 方法来引导用户进行身份验证。
实时通知
AngularFire 还提供了一个实时通知功能，它可以帮助我们实时更新应用程序中的数据。下面是一个示例：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------------- - ---- ------------------------- ------------ --------- ----------- --------- - ------- ------- -------- - -- ------ ----- ------------ - -------- ------- ------------------- ------------ --------------------- - ---------------------------------------- -- - --------------------- ------------ - -------------------------- --- - -展开代码
代码中，我们首先导入了 AngularFireMessaging 模块。在组件的构造函数中，我们创建了一个 message 变量，它将在接收到新消息时更新。
在 messages 中，我们使用 subscribe() 方法来订阅新消息，并在发送新消息时更新消息内容。
云存储
AngularFire 还提供了一个云存储功能，它可以将应用程序中的数据存储在 Firebase 的云服务器中。下面是一个示例：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------ - ---- ----------------------- ------ - ---------- - ---- ------- ------------ --------- ----------- --------- - ------- ----------------------------- ------------- - -- ------ ----- ------------ - -------------- ------------------- ------------------- ---------- ------------------- - - ------------ - ----- ---- - ---------------------- ----- ---- - --------------------- ----- --- - ------------------------- ----- ---- - -------------- ------------------ - ------------------------- - -展开代码
代码中，我们首先导入了 AngularFireStorage 和 Observale 模块。在组件中，我们为 uploadPercent 变量创建了一个 Observable 类型数据，以便在上传文件时更新进度。
在 uploadFile() 函数中，我们首先获取上传文件的引用，然后使用 put() 方法将文件上传到 Firebase 云存储中，同时使用 percentageChanges() 方法更新上传进度。
如上所述，AngularFire 提供了许多功能和特性，可以帮助我们轻松地使用 Firebase 实时数据库和其他 Firebase 服务。无论你是正在创建实时任务应用程序，还是正在构建一个协作游戏，AngularFire 都可以为您提供合适的解决方案，让您的应用程序更加优秀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc3567a231b2b7eddac259
