要配置Angular应用程序以使用Firestore,您需要执行以下步骤:
npm install firebase @angular/fire
firebaseConfig.ts
的文件,并将以下内容添加到该文件中:export const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
请确保将上述值替换为您的Firebase项目的实际值。
app.module.ts
的文件,并将以下内容添加到该文件中:import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { firebaseConfig } from './firebaseConfig';
@NgModule({
declarations: [
// 声明组件
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
确保将firebaseConfig
导入到app.module.ts
中。
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-root',
template: `
Firestore Example
-
{{ item.name }}
`,
})
export class AppComponent {
items: any[];
constructor(private firestore: AngularFirestore) {
this.items = this.firestore.collection('items').valueChanges();
}
}
上述代码将从Firestore的'items'集合中检索数据,并在模板中显示它们。
这就是配置Angular应用程序以使用Firestore的基本步骤。请确保在使用Firestore之前,您已经在Firebase控制台中创建了项目并启用了Firestore数据库。