Angular 5 async管道结合FirebaseDatabase无法正常工作的问题

嘿，我之前在做Angular5结合Firebase的项目时也碰到过类似的问题，当时也疑惑为什么async管道没按预期自动取消订阅，后来排查出几个关键点，分享给你：

先明确核心逻辑 #

首先，async管道确实会在组件销毁（触发ngOnDestroy）时自动取消订阅Observable，但AngularFireDatabase返回的实时数据流（AngularFireList/AngularFireObject对应的Observable）有它的特殊性，可能因为使用方式或版本问题导致异常。

常见问题与解决方案 #

1. 重复订阅导致的未取消 #

如果你在组件类里手动订阅了同一个Observable，同时又在模板里用了async管道，这会产生两个独立的订阅：

• async管道的订阅会被自动取消
• 手动的订阅不会被async管道处理，需要你手动取消

举个错误示例：

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable, Subscription } from 'rxjs';

@Component({
  template: `<div *ngFor="let item of items$ | async">{{item}}</div>`
})
export class AppComponent implements OnInit, OnDestroy {
  items$: Observable<any[]>;
  private manualSub: Subscription; // 手动订阅的引用

  constructor(private db: AngularFireDatabase) {}

  ngOnInit() {
    this.items$ = this.db.list('test-items').valueChanges();
    // 这里手动订阅了同一个Observable
    this.manualSub = this.items$.subscribe(items => {
      console.log('手动订阅触发:', items);
    });
  }

  ngOnDestroy() {
    // 必须手动取消这个订阅！
    if (this.manualSub) {
      this.manualSub.unsubscribe();
    }
  }
}

如果漏掉手动取消这个订阅，就会出现组件销毁后仍有Firebase连接的异常。

2. 版本不匹配导致的生命周期冲突 #

Angular5需要搭配对应版本的AngularFire2（当时的包名还是angularfire2），版本不兼容会导致生命周期钩子和订阅取消逻辑出错。建议你的package.json里依赖版本大概是这样：

{
  "@angular/core": "^5.2.11",
  "angularfire2": "^5.0.0-rc.11",
  "firebase": "^5.12.0"
}

可以通过npm install angularfire2@5.0.0-rc.11 firebase@5.12.0来安装匹配版本。

3. 确认组件确实触发了ngOnDestroy #

有时候组件可能因为路由配置或嵌套方式，没有正确触发销毁钩子。你可以在ngOnDestroy里加日志验证：

ngOnDestroy() {
  console.log('组件已销毁');
  // 其他取消订阅逻辑
}

如果日志没打印，那问题出在组件生命周期上，需要先排查路由或组件嵌套的配置。

调试小技巧 #

你可以打开Firebase控制台的实时数据库 > 监控面板，查看当前的连接数。当组件销毁后，连接数应该对应减少，以此验证订阅是否被正确取消。

内容的提问来源于stack exchange，提问作者Mat A