Angular 6/AngularFire迁移：Angular 4旧代码适配求助

嘿，我帮你梳理下从Angular 4 + AngularFire2迁移到Angular 6 + AngularFire的适配方案，主要涉及依赖升级、API变更和代码调整这几个方面：

1. 升级依赖包 #

首先得把旧的angularfire2替换成官方最新的@angular/fire和firebase包，因为Angular 6+对应AngularFire 5.x及以上版本，执行下面的命令就能完成依赖替换：

npm uninstall angularfire2 firebase
npm install firebase @angular/fire --save

2. 调整模块导入配置 #

在你的AppModule（或相关功能模块）里，需要更新AngularFire的导入路径，并配置Firebase初始化信息：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment'; // 假设你有环境配置文件

import { NavigationComponent } from './navigation.component';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig), // 传入你的Firebase配置
    AngularFireDatabaseModule // 导入数据库模块
  ],
  declarations: [NavigationComponent],
  bootstrap: [NavigationComponent]
})
export class AppModule { }

3. 修改navigation.component.ts代码 #

AngularFire 5.x彻底移除了FirebaseListObservable这类旧类型，改用AngularFireList结合RxJS操作符来处理数据，同时query参数也不再直接支持，需要用RxJS管道操作替代。以下是修改后的完整代码：

原代码片段回顾： #

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { LogoComponent } from './logo.component';
@Component({ selector: 'app-navigation', templateUrl: './navigation.component.html' })
export class NavigationComponent {
  items: FirebaseListObservable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.items = db.list('/pages', { query: ...

修改后的代码： #

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; // 根据你的查询需求导入对应操作符
import { LogoComponent } from './logo.component';

@Component({ 
  selector: 'app-navigation', 
  templateUrl: './navigation.component.html' 
})
export class NavigationComponent {
  items: Observable<any[]>; // 改用Observable类型接收数据
  pagesRef: AngularFireList<any>; // 保留数据库节点引用

  constructor(db: AngularFireDatabase) {
    // 获取/pages节点的数据库引用
    this.pagesRef = db.list('/pages');
    
    // 替代原来的query参数：用RxJS pipe处理查询逻辑
    // 举个例子，如果你原来的query是{orderByChild: 'order', limitToLast: 5}，可以这样实现：
    this.items = this.pagesRef.snapshotChanges().pipe(
      map(changes => 
        changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
        // 这里可以继续添加filter、sort等操作符来实现你需要的查询逻辑
      )
    );

    // 如果不需要节点的key值，也可以用更简洁的valueChanges()：
    // this.items = this.pagesRef.valueChanges();
  }
}

关键变更点说明 #

• 类型替换：FirebaseListObservable → AngularFireList + Observable组合使用
• 查询方式：移除了db.list()的query参数，改用RxJS操作符（如map、filter等）在管道中处理数据过滤、排序逻辑
• 导入路径：所有angularfire2/xxx路径替换为@angular/fire/xxx
• 数据获取：snapshotChanges()返回包含节点key和数据的对象，valueChanges()只返回数据本身，可根据需求选择

内容的提问来源于stack exchange，提问作者eat-sleep-code