AngularFire 5是一个用于在Angular应用程序中集成Firebase的库。AngularFire 5和Angular 9之间的代码示例解决方法如下:
npm install firebase @angular/fire --save
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule
],
// ...
})
export class AppModule { }
export const environment = {
production: false,
firebaseConfig: {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
databaseURL: 'YOUR_DATABASE_URL',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
appId: 'YOUR_APP_ID'
}
};
请确保将YOUR_API_KEY,YOUR_AUTH_DOMAIN等值替换为您自己Firebase项目的配置信息。
import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
-
{{ item.name }}
`
})
export class AppComponent {
itemsRef: AngularFireList;
items$: Observable;
constructor(private db: AngularFireDatabase) {
this.itemsRef = db.list('items');
this.items$ = this.itemsRef.valueChanges();
}
addItem() {
this.itemsRef.push({ name: 'New Item' });
}
}
在上述示例中,我们使用AngularFireDatabase来获取名为“items”的数据库中的所有数据,并使用async管道在模板中进行循环显示。当点击“添加项目”按钮时,将向数据库中添加一个新项目。
以上是一个基本的示例,您可以根据您的需求扩展和修改代码。希望这能帮助到您开始使用AngularFire 5与Angular 9。