使用angularFire2添加Firebase

Firebase是一个Google的实时数据库，它提供了一个API用于将实时事件推送到前端应用程序。官方的Firebase SDK支持多种平台，包括Web，iOS和Android。AngularFire是Firebase的官方库，用于在Angular中引入实时数据库的功能。

在本文中，我们将学习如何使用angularFire2添加Firebase到Angular应用程序中。我们将从安装angularFire2开始，到在Angular中添加Firebase的实时事件。

安装AngularFire2

要在Angular项目中使用AngularFire2，您需要安装它。通过运行以下命令来安装：

npm install firebase @angular/fire --save

将Firebase配置添加到Angular应用程序

执行以下命令来启动Angular CLI：

ng generate module appFirebase

在appFirebase.module.ts中，将firebase配置添加到你想添加它的Angular应用程序。在这个例子中，我们将Firebase配置添加到环境文件中，即src/environments/firebase.ts：

import { firebaseConfig } from './firebase.config';
import { AngularFireModule } from '@angular/fire';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
  ]
})
export class AppFirebaseModule { }

添加Firebase模块

现在将Firebase模块添加到应用程序模块。在app.module.ts中导入AngularFireModule并将其添加到imports数组中，如下所示：

import { AppFirebaseModule } from './appFirebase.module';
import { AngularFireModule } from '@angular/fire';

@NgModule({
  imports: [
    AppFirebaseModule,
    AngularFireModule,
  ],
})
export class AppModule { }

在Angular中使用Firebase

如果您已经对Firebase的API熟悉，那么您可能会知道Firebase的实时功能可以用于同步数据模型。在本例中，我们将学习如何使用Firebase的实时事件来同步Angular应用程序的数据模型。

我们假设你已经有了一个Angular应用程序，其中有一个Hero服务。

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(private db: AngularFireDatabase) {
    const heroesRef = db.list('heroes');
    heroesRef.valueChanges().subscribe(heroes => {
      console.log(heroes);
    });
  }

}

在上面的示例中，我们使用AngularFireDatabase服务获取数据的引用。

const heroesRef = db.list('heroes');

然后，我们订阅valueChanges()以获取实时事件。

heroesRef.valueChanges().subscribe(heroes => {
  console.log(heroes);
});

valueChanges()返回一个Observable，每次数据更新时都会发出一个新值。

##结论

AngularFire2是在Angular中使用Firebase的推荐方法。在本文中，我们已经了解了如何使用AngularFire2添加Firebase到Angular应用程序中，以及如何使用它的实时事件来同步数据模型。