Angular中switchMap内方法接收新ID后不再触发的问题排查

场景复现 #

组件内定义私有Subject：

private readonly selectedID = new Subject<number | null>();

通过@Input setter触发Subject的next方法：

@Input()
public set myID(value: number | null)
{
    this.selectedID.next(value);
}

构建Observable关联HTTP请求，期望新ID触发新请求：

public readonly myModel$: Observable<IMyObject>;
public isLoading = false;

constructor(private myHttpService: MyHttpService, private myAlertService: MyAlertService)
{
    this.myModel$ = this.selectedID.pipe(
        tap(() => this.isLoading = true),
        switchMap(id => id == null ? of(null) : this.myService.getMyModel(id)),
        catchError(e =>
        {
            this.myAlertService.handleError(e);
            return of(null);
        }),
        tap(() => this.isLoading = false));
}

模板用async管道订阅：

<ng-container *ngIf="myModel$ | async as m;">
  {{ m | json }}
</ng-container>
<ng-container *ngIf="isLoading">
    <i class="fas fa-spinner fa-spin" aria-hidden="true"></i>
</ng-container>

问题现象 #

首次设置myID时流程正常，后续传入新ID，myService.getMyModel不再执行，第一个tap也只触发一次。

核心原因 #

catchError的位置错误：当HTTP请求抛出错误时，catchError会返回一个新的Observable（of(null)），但此时整个上游的selectedID Subject订阅会被终止——因为catchError在switchMap之后，属于整个管道的错误处理，一旦捕获到错误，RxJS会自动退订上游的Observable，导致后续的next事件无法触发管道操作。

修复方案 #

将catchError移到switchMap内部，仅捕获单个HTTP请求的错误，不影响上游Subject的订阅：

public readonly myModel$: Observable<IMyObject>;
public isLoading = false;

constructor(private myHttpService: MyHttpService, private myAlertService: MyAlertService)
{
    this.myModel$ = this.selectedID.pipe(
        tap(() => this.isLoading = true),
        switchMap(id => {
            if (id == null) {
                return of(null);
            }
            // 为单个HTTP请求添加错误捕获
            return this.myService.getMyModel(id).pipe(
                catchError(e => {
                    this.myAlertService.handleError(e);
                    return of(null);
                })
            );
        }),
        tap(() => this.isLoading = false));
}

额外检查点 #

1. 确认myID输入值确实在变化：Angular的@Input setter仅在值发生原始值变化（如number、string）或引用变化（如对象、数组）时触发，若传入相同的原始值，setter不会执行，可在setter内添加console.log验证。
2. 若myModel$被多个async管道订阅，可添加shareReplay(1)避免重复请求：

this.myModel$ = this.selectedID.pipe(
    // ...其他操作符
    shareReplay(1)
);

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