基于AngularFire从Firebase按ID获取指定博客数据的实现疑问

看起来你已经走了大部分流程了——首页文章列表展示、路由跳转、详情页获取ID都搞定了，就差最后一步从Firebase拿对应ID的文章数据对吧？我来帮你搞定这个getObjectById方法，分两种常用的Firebase数据库情况来说明：

情况1：使用Firebase Firestore（当前主流方案） #

首先，你的UploadService需要注入AngularFirestore，然后实现异步查询方法（因为Firebase的操作都是异步的，不能直接返回同步数据）：

import { Injectable } from '@angular/core';
import { AngularFirestore, DocumentData } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private afs: AngularFirestore) { }

  // 实现按ID查询文章的方法
  getObjectById(id: string): Observable<DocumentData | undefined> {
    // 这里的`articles`是你Firestore中存储文章的集合名称，记得改成你实际用的名称
    return this.afs.collection('articles').doc(id).valueChanges();
  }
}

同时修改你的文章详情组件 #

你原来的组件代码直接赋值是行不通的，因为getObjectById返回的是Observable，需要订阅它才能拿到数据。推荐用async管道来自动管理订阅，避免内存泄漏：

组件TS代码优化：

import { Component, OnInit } from '@angular/core';
import { UploadService } from '../upload.service';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { DocumentData } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css']
})
export class ArticlesComponent implements OnInit { 
  // 用$后缀标注这是一个Observable（Angular社区约定）
  article$: Observable<DocumentData | undefined>; 

  constructor(private blogService: UploadService, private route: ActivatedRoute) { }

  ngOnInit() {
    // 用switchMap避免嵌套订阅，更优雅
    this.article$ = this.route.params.pipe(
      switchMap(params => this.blogService.getObjectById(params['id']))
    );
  } 
}

组件HTML代码优化：

<div style="background-color:white" class="contenedorBlog"> 
  <!-- 用async管道订阅Observable，并把数据赋值给article变量 -->
  <div *ngIf="article$ | async as article" style="padding:40px" class="rounded"> 
    <h2> {{article.title}} </h2> 
    <p>Fecha: {{ article.systemDate }}</p> 
    <div class="content" [innerHTML]="article.content"></div> 
  </div> 
</div>

情况2：使用Firebase Realtime Database #

如果你用的是旧版的Realtime Database，服务的实现方式略有不同：

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private db: AngularFireDatabase) { }

  getObjectById(id: string): Observable<any> {
    // 这里的`/articles/${id}`是你Realtime Database中文章节点的路径，改成你实际的路径
    const articleRef = this.db.object(`/articles/${id}`);
    return articleRef.valueChanges();
  }
}

组件的修改逻辑和Firestore版本一致，同样需要用订阅或者async管道来处理异步数据。

几个注意点： #

• 确保你的Angular项目已经正确配置了Firebase，并且导入了AngularFireModule和对应的数据库模块（AngularFirestoreModule或AngularFireDatabaseModule）到AppModule中。
• 确认你代码中的集合/节点名称和Firebase控制台里的完全一致，不然会查不到数据。
• 用async管道是Angular中处理异步数据的最佳实践，它会自动帮你完成订阅和取消订阅，避免内存泄漏。

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