如何为Angular电商项目实现无需逐个定义的商品分类路由？

完全可行，用Angular的动态路由参数就能搞定，不用给每个分类单独写路由配置，一套通用组件+路由规则就能适配所有商品分类。

1. 配置动态路由 #

在你的路由模块（比如app-routing.module.ts）里定义带动态参数的路由，用:category匹配任意分类名称，同时嵌套商品详情的动态路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  {
    path: 'products/:category',
    component: ProductListComponent, // 通用列表组件，适配所有分类
    children: [
      {
        path: ':productId',
        component: ProductDetailComponent // 通用详情组件
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在列表组件中获取分类参数并拉取数据 #

在ProductListComponent里，通过ActivatedRoute获取当前的分类参数，再根据这个参数去Firebase查询对应分类的商品：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

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

  constructor(
    private route: ActivatedRoute,
    private firestore: AngularFirestore
  ) { }

  ngOnInit(): void {
    // 监听分类参数变化，支持路由切换时自动更新数据
    this.route.paramMap.subscribe(params => {
      const category = params.get('category');
      if (category) {
        // 从Firebase的products集合中筛选对应分类的商品
        this.products$ = this.firestore.collection('products', ref => 
          ref.where('category', '==', category)
        ).valueChanges({ idField: 'id' }); // 带上文档ID，方便生成详情链接
      }
    });
  }
}

3. 生成分类导航和商品详情链接 #

在模板里直接用动态路由生成链接，不管新增多少分类，只要Firebase里的商品有对应的category字段，直接加导航项就行：

<!-- 顶部分类导航 -->
<nav>
  <a [routerLink]="['/products', 'tables']">桌子</a>
  <a [routerLink]="['/products', 'chairs']">椅子</a>
  <!-- 以后加新分类直接加这行就行，不用改路由 -->
  <a [routerLink]="['/products', 'sofas']">沙发</a>
</nav>

<!-- 商品列表 -->
<div *ngFor="let product of products$ | async" class="product-item">
  <h3>{{ product.name }}</h3>
  <!-- 用相对路由生成详情链接 -->
  <a [routerLink]="['./', product.id]">查看详情</a>
</div>

补充说明 #

这种方案的好处是扩展性极强——以后新增任何商品分类，只需要在导航里加个链接，Firebase里的商品数据带上对应分类字段即可，完全不用修改路由配置或者新增组件，完美适配你的需求。

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