Cloud Firestore刚刚宣布成为一种新的数据库，以填补Firebase实时数据库可能不是最佳工具的空白。Cloud FiRestore是一个基于文档的NoSQL数据库。数据库的根是集合(例如：TODO、USERS、FILES)，集合只能包含文档。文档包含键-值对，并且可以包含它们自己的集合，称为子集合。因此，与传统Firebase实时数据库提供的平面JSON树相比，这使得构建具有更复杂分层需求的应用程序变得更容易。

在这里，我们将介绍在一个角度2+项目中使用与云火交互的最基本的知识。您需要有Firebase帐户并启用新数据库。

设置

首先，将需要的Firebase包(Firebase和angularFire2)安装到您的ANGLE项目中：

1$ yarn add firebase angularfire2
2
3# or, using npm:
4$ npm install firebase angularfire2

然后将AngularFireModule和AngularFirestore模块添加到您的应用程序模块中：

1[label app.module.tsc]
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4
5import { AngularFireModule } from 'angularfire2';
6import { AngularFirestoreModule } from 'angularfire2/firestore';
7import { environment } from '../environments/environment';
8import { AppComponent } from './app.component';

<$>[注意]注意，我们在AngularFirestore模块 上调用了enablePersistence方法，自动开启Chrome、Safari和Firefox上的本地缓存，这将使应用程序在离线时保持可用。<$>

这样，您的Firebase应用程序配置将位于enviroment.ts文件中，如下所示：

 1[label /enviroments/enviroment.ts]
 2export const environment = {
 3  production: false,
 4  firebase: {
 5    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
 6    authDomain: 'your-project-id.firebaseapp.com',
 7    databaseURL: 'https://your-project-id.firebaseio.com',
 8    projectId: 'your-project-id',
 9    storageBucket: 'your-project-id.appspot.com',
10    messagingSenderId: 'XXXXXXXXXXXX'
11  }
12};

基本使用方法

现在我们的应用程序已经配置了Firebase，我们可以开始使用数据库了。我们将围绕一个简单的todo应用程序这一概念演示几个CRUD操作，该应用程序包含一个todo集合以及该集合中包含一个描述和一个完整字段的文档。

首先，您需要将可注射的AngularFiRestore注入您的组件：

1import { Component } from '@angular/core';
2import { AngularFirestore } from 'angularfire2/firestore';
3
4@Component({ ... })
5export class AppComponent {
6  constructor(private afs: AngularFirestore) {
7    // ...
8  }
9}

要获得对集合的访问权限，您需要创建一个对它的引用，如下所示：

1this.todoCollectionRef = this.afs.collection('todos'); // a ref to the todos collection

<$>[注意]创建对集合的引用不会执行任何网络调用，并且引用不存在的集合是安全的，因为如果需要，该集合将自动创建。没有任何文档的集合也将被自动删除。<$>

然后，您可以通过对集合引用调用valueChanges()来侦听集合文档上的更改：

1this.todo$ = this.todoCollectionRef.valueChanges();

valueChanges 方法返回集合中文档的可观察对象。还有一个SnaphotChanges方法，它还返回id以及关于文档的元数据。请继续阅读使用** SnaphotChanges** 的示例。

因此，下面是我们的Start Todo应用程序，它将从数据库获取Todo集合中的文档：

 1[label app.component.ts]
 2import { Component } from '@angular/core';
 3import {
 4  AngularFirestore,
 5  AngularFirestoreCollection
 6} from 'angularfire2/firestore';
 7
 8import { Observable } from 'rxjs/Observable';
 9export interface Todo {
10  description: string;
11  completed: boolean;
12}
13@Component({ ... })
14export class AppComponent {
15  todoCollectionRef: AngularFirestoreCollection<Todo>;
16  todo$: Observable<Todo[]>;

我们可以在模板中显示我们的待办事项，如下所示：

1[label app.component.html]
2<ul>
3  <li *ngFor="let todo of todo$ | async"
4      [class.completed]="todo.completed">
5    {{ todo.description }}
6  </li>
7</ul>

添加条目

要在集合中添加新文档，只需对集合引用调用Add：

1addTodo(todoDesc: string) {
2  if (todoDesc && todoDesc.trim().length) {
3    this.todoCollectionRef.add({ description: todoDesc, completed: false });
4  }
5}

<$>[注意]由于我们的TODO集合引用是针对TODO接口输入的，所以类型脚本编译器将知道应该使用Add 方法传递的数据的形状。<$>

更新和删除条目

要更新或删除集合中的文档，我们还需要文档的id，valueChanges方法不会返回该id。我们将稍微修改一下我们的实现，使用snapshotChanges方法，并为每个todo文档包含 id ：

 1[label app.component.ts]
 2import { Component } from '@angular/core';
 3import {
 4  AngularFirestore,
 5  AngularFirestoreCollection
 6} from 'angularfire2/firestore';
 7
 8import { Observable } from 'rxjs/Observable';
 9export interface Todo {
10  id?: string;
11  description: string;
12  completed: boolean;
13}
14@Component({
15  selector: 'app-root',
16  templateUrl: './app.component.html',
17  styleUrls: ['./app.component.css']
18})
19export class AppComponent {
20  todoCollectionRef: AngularFirestoreCollection<Todo>;
21  todo$: Observable<Todo[]>;

我们将映射到由SNAPSHOTCHANGES返回的可观察对象，以提取文档的id及其数据。

<$>[注]SnaphotChanges返回的操作类型为DocumentChangeAction，包含类型和** 负载** 。类型被添加、修改或删除，并且有效负载包含文档的ID、元数据和数据。<$>

有了这些，一切工作仍然一样，我们现在可以轻松地实现更新和删除TODO文档，并将更改立即反映到我们的模板中：

1[label app.component.ts (partial)]
2updateTodo(todo: Todo) {
3  this.todoCollectionRef.doc(todo.id).update({ completed: !todo.completed });
4}
5
6deleteTodo(todo: Todo) {
7  this.todoCollectionRef.doc(todo.id).delete();
8}

了解详情

参考AngularFire 2的Github repo和Cloud Firestore文档来了解更多关于API和可用方法的信息。
请参阅我们的这篇文章，了解如何在Angular中使用Firebase实时数据库。

使用 AngularFire 在 Angular 中使用云 Firestore

设置

基本使用方法

添加条目

更新和删除条目

了解详情