配置 AngularFire 和 Firebase
在你的项目目录中安装所需的包：
$ npm install angularfire2 firebase promise-polyfill --save
这应该在项目的 package.json 文件中添加 angularfire2、promise-polyfill 和 firebase 条目作为依赖项。类似于：
"angularfire2": "^4.0.0-rc.1",
"firebase": "^4.1.3",
"promise-polyfill": "^6.0.2",
设置@NgModule
在您喜欢的编辑器中打开您的项目并打开app.module.ts 文件，位于src/app 下
并添加以下三个条目。
1) 在顶部导入 AngularFireModule 和 AngularFireDatabaseModule。
2) 定义您的 firebaseConfig 常量。
3) 通过在 @NgModule 的 "imports" 数组中添加 AngularFireModule 和 AngularFireAuthModule 来初始化您的应用
4) 另外，在@NgModule 的“providers”数组中添加 AngularFireDatabase
您的app.module.ts 文件应该如下所示。
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
export const firebaseConfig = {
apiKey: "xxxxxxxxxx",
authDomain: "your-domain-name.firebaseapp.com",
databaseURL: "https://your-domain-name.firebaseio.com",
storageBucket: "your-domain-name.appspot.com",
messagingSenderId: '<your-messaging-sender-id>'
};
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
AngularFireDatabase,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
```
注入AngularFire并绑定到List
现在在您的组件中注入 AngularFireDatabase。通过进入src/pages/home/home.ts 打开您的home.ts 并制作
以下更改：
1) 在组件顶部导入“AngularFireDatabase”。
2) 在构造函数中注入您的 AngularFireDatabase 依赖项。
3) 调用 AngularFireDatabase 对象的 list 方法。
您的home.ts 文件应如下所示：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items: Observable<any[]>;
constructor(public navCtrl: NavController, afDB: AngularFireDatabase) {
this.items = afDB.list('cuisines').valueChanges();
}
}
*确保您的数据库中有 cuisines 节点和一些原始数据。
更新您的home.htmlsrc/pages/home/home.html，并添加以下条目
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item class="text" *ngFor="let item of items | async">
{{item | json}}
</ion-item>
</ion-list>
</ion-content>
通过执行以下命令运行您的应用
C:\projects\auth-ng4-ionic3-af2> ionic serve
这应该从 firebase 获取数据。
来源：https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md
编辑：如果这不起作用，您可能需要降级 firebase。在这种情况下，运行以下命令：
npm install --save firebase@3.9.*