如何在Angular路由解析器中正确应用声明式RxJS代码？

问题描述 #

我希望将以下代码适配到Angular路由解析器中：

private categorySubject = new Subject<number>();
categorySelectedAction$ = this.categorySubject.asObservable();

products$ = this.categorySelectedAction$.pipe(
 switchMap(catId=>this.http.get<Product[]>(`${this.url}?cat=${catId}`))
    .pipe(
      tap(data => console.log(data)),
      catchError(this.handleError)
 ));

selectedCategoryChanged(categoryId: number): void {
  this.categorySubject.next(categoryId);
}

尝试让路由解析器调用selectedCategoryChanged方法并返回products$，但未得到任何返回结果。

问题原因 #

直接这么做不行的核心原因是：Subject的发射是一次性无缓存的。当你在解析器里调用selectedCategoryChanged触发categorySubject.next(catId)时，此时products$还没被Angular路由系统订阅，这次发射的值会直接丢失，后续订阅时收不到任何数据。

解决方案 #

方案1：重构服务方法（推荐）

放弃依赖Subject的订阅流，直接新增一个根据分类ID获取产品的方法，让解析器直接调用这个方法返回Observable：

修改服务代码：

// 在你的产品服务中新增方法
getProductsByCategory(catId: number): Observable<Product[]> {
  return this.http.get<Product[]>(`${this.url}?cat=${catId}`).pipe(
    tap(data => console.log(data)),
    catchError(this.handleError)
  );
}

路由解析器代码：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { Product } from './path-to-product.model';
import { ProductService } from './path-to-product.service';

@Injectable()
export class ProductsResolver implements Resolve<Product[]> {
  constructor(private productService: ProductService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<Product[]> {
    // 从路由参数中获取分类ID，根据你的路由配置调整参数名
    const categoryId = +route.paramMap.get('categoryId')!;
    return this.productService.getProductsByCategory(categoryId);
  }
}

这种方式更符合路由解析器的设计逻辑：解析器只负责获取当前路由所需的数据，返回一个单次完成的Observable，避免了Subject带来的订阅时机问题。

方案2：复用现有流（仅需保留原有逻辑时）

如果一定要复用现有的products$流，可以把Subject换成ReplaySubject(1)，它会缓存最近一次发射的值，确保后续的订阅者能拿到数据：

修改服务中的Subject定义：

// 用ReplaySubject替代Subject，缓存1条最近的数据
private categorySubject = new ReplaySubject<number>(1);

路由解析器代码：

resolve(route: ActivatedRouteSnapshot): Observable<Product[]> {
  const categoryId = +route.paramMap.get('categoryId')!;
  this.productService.selectedCategoryChanged(categoryId);
  return this.productService.products$;
}

这样当解析器订阅products$时，ReplaySubject会把之前发射的分类ID重新推送给流，触发HTTP请求并返回结果。

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