Ionic 3中如何通过参数从Firebase实时数据库获取数据

嘿，我帮你把那篇Ionic 2的Firebase读取代码完美适配到Ionic 3，还专门解决通过uID获取对应层级数据的问题，一步步来：

先搞定依赖和配置 #

首先得确保你的项目里装对了兼容Ionic 3的Firebase依赖，在项目根目录跑这个命令：

npm install firebase@7.24.0 @angular/fire@5.4.2 --save

选这个版本是因为Ionic 3对应Angular 5，这俩版本刚好兼容，不会出奇怪的版本冲突。

然后去app.module.ts里配置Firebase，把你的控制台里的配置信息填进去：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

// 引入Firebase核心和数据库模块
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

// 替换成你自己的Firebase控制台配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID"
};

@NgModule({
  declarations: [
    MyApp
    // 这里加你项目里的其他组件
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig), // 初始化Firebase
    AngularFireDatabaseModule // 注册实时数据库模块
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
    // 这里加你项目里的其他组件
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

编写组件代码实现uID查询 #

接下来是你的页面组件，比如叫UserDataPage，直接用AngularFire的API来通过uID获取数据：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-user-data',
  templateUrl: 'user-data.html'
})
export class UserDataPage {
  userData$: Observable<any>;
  targetUid: string; // 用来存用户输入的uID

  constructor(public navCtrl: NavController, private afDb: AngularFireDatabase) {
    // 示例：默认查询某个uID的数据
    this.loadUserData('默认的uID');
  }

  // 封装一个方法，传入uID就能获取对应数据
  loadUserData(uid: string) {
    // 指向数据库里users节点下的对应uID层级
    const userRef: AngularFireObject<any> = this.afDb.object(`users/${uid}`);
    // 转换成Observable，方便在模板里用async管道展示
    this.userData$ = userRef.valueChanges();
  }
}

在模板里展示数据 #

最后是页面的HTML模板，用Angular的async管道自动处理订阅，不用手动管理，还能避免内存泄漏：

<ion-header>
  <ion-navbar>
    <ion-title>用户详情</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- 动态查询区域 -->
  <ion-item>
    <ion-label>输入用户uID</ion-label>
    <ion-input type="text" [(ngModel)]="targetUid"></ion-input>
  </ion-item>
  <button ion-button block (click)="loadUserData(targetUid)" [disabled]="!targetUid">查询用户</button>

  <!-- 展示查询到的数据 -->
  <div *ngIf="userData$ | async as user" class="user-card">
    <h3>{{user.nickname}}</h3>
    <p>邮箱：{{user.email}}</p>
    <p>注册时间：{{user.createdAt}}</p>
  </div>
</ion-content>

适配的核心要点 #

• 旧的Ionic 2代码用的是AngularFire2的老版本，Ionic 3要换成@angular/fire，这是官方整合后的包，更贴合Angular 5的语法
• 用AngularFireObject获取单个节点的数据（就是你要的uID对应层级），如果要查列表就用AngularFireList
• valueChanges()会返回一个Observable，配合async管道在模板里直接用，不用手动订阅和取消，省了很多麻烦
• 如果你需要一次性获取数据而不是实时监听，可以用snapshotChanges()然后取payload.val()，不过实时监听更符合Firebase的特性

内容的提问来源于stack exchange，提问作者Umut Gür