Angular OnPush变更检测策略下如何显示路由参数更新时的加载模板

问题核心原因 #

switchMap仅在新请求返回时才对外发射值，外层searchResults$在请求过程中不会输出undefined，async管道会保留上一次的结果值，因此不会触发loading分支。

兼容OnPush的解决方案 #

我们可以将搜索的「加载状态」和「结果数据」封装为统一的状态流，通过async管道驱动视图更新，天然兼容ChangeDetectionStrategy.OnPush策略，无需手动维护加载标志位也无需切换变更检测策略。

具体实现步骤

1. 定义状态接口（TS场景下可选，用于类型约束）

interface SearchState {
  loading: boolean;
  results: string[];
}

2. 调整组件中Observable的声明与组装逻辑

// 替换原来的searchResults$
searchState$: Observable<SearchState>;

constructor(
  private route: ActivatedRoute,
  private svc: SearchService) { 
  this.searchState$ = this.route.paramMap.pipe(
    map((p: ParamMap) => p.get('searchTerm')),
    switchMap((searchTerm: string) => 
      // 用concat拼接两个通知：先发射加载状态，再发射请求结果状态
      concat(
        of({ loading: true, results: [] }),
        this.svc.getSearchResults(searchTerm).pipe(
          map(results => ({ loading: false, results }))
        )
      )
    )
  );
}

3. 调整模板绑定逻辑

<p>Search Results</p>

<ng-container *ngIf="searchState$ | async as state">
  <ul *ngIf="!state.loading; else loading">  
    <li *ngFor="let r of state.results">
      {{ r }}
    </li>
  </ul>
</ng-container>

<ng-template #loading>Loading!!11!</ng-template>

方案原理 #

该方案的兼容性来自Angular async管道的内置逻辑：当绑定的Observable发射新值时，async管道会自动调用ChangeDetectorRef.markForCheck()标记组件为需要变更检测，完全符合OnPush策略的更新触发规则，无需额外处理。

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