Angular结合Firebase如何实现产品详情数据获取与展示

已完成前置代码梳理 #

• 数据模型定义（product.model.ts）
  原代码缺接口声明头，补上后可直接使用：

  export interface Product {
    id?: string;
    name: string;
    price: number;
    price_solde: number;
    description: string;
    fichetech: string;
    imageURL: string[];
    category: string;
    createdAt: Date;
  }
  

• 服务层实现（product.service.ts）
  其中getDetailProduct(productId: string)方法负责按产品ID查询单条文档数据：

  import { Injectable } from '@angular/core';
  import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
  import { Observable } from 'rxjs';
  import { Product } from 'src/app/models/product.model';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ProductsService {
      productCollection: AngularFirestoreCollection<Product>;
      
      constructor(private dbstore: AngularFirestore) {
        this.productCollection = this.dbstore.collection('products', (ref) => 
          ref.orderBy('name', 'desc')
        );
      }
  
      addProduct = (product: Product) => this.productCollection.add(product);
  
      getProducts() {
        return this.dbstore.collection('products').snapshotChanges();
      }
  
      getDetailProduct(productId: string): Observable<Product | undefined> {
        return this.productCollection.doc(productId).valueChanges();
      }
  }
  

• 列表页跳转逻辑已实现，点击产品卡片会自动携带ID跳转至详情路由：
  组件跳转方法：

  goToDetailsProduct(productId?: string): void {
    this.router.navigate(['product-details', productId]);
    console.log(productId);
  }
  

  模板点击事件绑定：

  <div class="card card-shopping" *ngFor="let product of products" (click)="goToDetailsProduct(product.id)">
  

详情页实现步骤 #

现有组件代码已经拿到了路由参数、调用了查询方法，只差参数订阅逻辑优化和模板渲染两步：

1. 组件逻辑优化（details-product.component.ts） #

原写法用snapshot取路由参数仅在组件首次初始化时生效，若同组件内路由参数变化（比如从一个产品详情跳转到另一个）不会自动刷新数据，优化后代码：

import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { Product } from 'src/app/models/product.model';
import { ProductsService } from '../../shared/services/products.service'

@Component({
  selector: 'app-details-product',
  templateUrl: './details-product.component.html',
  styleUrls: ['./details-product.component.css']
})
export class DetailsProductComponent implements OnInit {
  product$?: Observable<Product | undefined>;

  constructor(
    private location: Location,
    private route: ActivatedRoute,
    private productService: ProductsService
  ) {}

  ngOnInit(): void {
    // 自动订阅路由参数变化，参数更新时同步拉取对应产品数据
    this.product$ = this.route.paramMap.pipe(
      switchMap(params => {
        const productId = String(params.get('productId'));
        return this.productService.getDetailProduct(productId);
      })
    )
  }

  // 激活返回方法
  goBack(): void {
    this.location.back();
  }
}

注意点：AngularFire的valueChanges()默认不会返回文档ID，如果详情页需要用到id字段，把getDetailProduct方法换成snapshotChanges()做数据映射，或者写入产品数据时把id同步存到文档字段中即可。

2. 模板渲染（details-product.component.html） #

用Angular内置的async管道直接订阅数据流，自动处理订阅解绑，同时加上加载态兜底：

<!-- 顶部返回按钮 -->
<button (click)="goBack()" class="back-btn">返回产品列表</button>

<!-- 产品内容渲染 -->
<ng-container *ngIf="product$ | async as product; else loading">
  <div class="product-detail-wrap">
    <!-- 产品图片区 -->
    <div class="img-group">
      <img *ngFor="let imgUrl of product.imageURL" [src]="imgUrl" [alt]="product.name">
    </div>
    <!-- 产品信息区 -->
    <div class="info-group">
      <h1>{{ product.name }}</h1>
      <p class="category">所属分类：{{ product.category }}</p>
      <div class="price-block">
        <span *ngIf="product.price_solde < product.price" class="origin-price">原价：¥{{ product.price }}</span>
        <span class="sell-price">到手价：¥{{ product.price_solde ? product.price_solde : product.price }}</span>
      </div>
      <div class="desc-block">
        <h3>产品介绍</h3>
        <p>{{ product.description }}</p>
      </div>
      <div class="spec-block">
        <h3>规格参数</h3>
        <p>{{ product.fichetech }}</p>
      </div>
      <p class="upload-time">上架时间：{{ product.createdAt | date:'yyyy年MM月dd日' }}</p>
    </div>
  </div>
</ng-container>

<!-- 加载/空数据兜底 -->
<ng-template #loading>
  <p class="tip">数据加载中，请稍候...</p>
</ng-template>

排错指南 #

如果页面拿不到数据，优先检查两个配置：

• 路由配置是否给product-details路径声明了:productId参数，参考配置：

  const routes: Routes = [
    // 其他业务路由
    { path: 'product-details/:productId', component: DetailsProductComponent }
  ]
  

• Firestore数据库规则是否配置了products集合的读取权限，避免权限拦截导致请求失败。
• 若产品图片加载失败，把存储图片的域名加到Angular安全信任域名列表中即可。

内容的提问来源于stack exchange，提问作者Stéphane Konan