为何OnPush变更检测下首次加载时加载指示器不显示？

问题根源 #

核心原因是首次加载时loading$的第一个值被丢失，且未触发Angular的变更检测：

1. 组件初始化时，reload$作为BehaviorSubject会立刻发出初始值，触发switchMap调用fetchData()。
2. 在fetchData()里，你同步调用了loading$.next(true)，但此时模板中loading$ | async的订阅还未完成——Angular在组件初始化阶段，会先完成组件类的实例化，再处理模板中的异步管道订阅，这就导致loading$.next(true)的发射时机早于订阅时机，这个true值直接被忽略了。
3. 而手动点击重载按钮时，组件已经完成初始化和首次变更检测，loading$的订阅已经存在，此时loading$.next(true)能被async管道捕获，进而触发变更检测更新视图。

你之前的误解在于：认为loading$发出值就一定会触发变更检测，但前提是async管道已经完成了对loading$的订阅。首次加载时这个订阅还没建立，所以值丢失，变更检测也不会触发。

解决方案 #

方案1：将loading$改为BehaviorSubject #

BehaviorSubject会保存当前最新值，当新订阅建立时会立刻推送这个值，避免首次值丢失：

@Component({
  selector: 'ngbd-accordion-basic',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './accordion-basic.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NgbdAccordionBasic {
  reload$ = new BehaviorSubject<void>(void 0);
  loading$ = new BehaviorSubject<boolean>(false); // 改为BehaviorSubject，初始值设为false
  data$ = this.reload$.pipe(switchMap(() => this.fetchData()));

  fetchData(): Observable<any[]> {
    this.loading$.next(true);

    return of([]).pipe(
      delay(4000),
      finalize(() => this.loading$.next(false))
    );
  }
}

当模板中的async管道订阅loading$时，会先拿到初始的false，随后fetchData()中发出的true会被捕获，触发变更检测显示加载指示器。

方案2：调整loading$值的发射时机 #

把loading$.next(true)放到Observable的管道中，确保它在data$被订阅后再执行：

fetchData(): Observable<any[]> {
  return of([]).pipe(
    tap(() => this.loading$.next(true)), // 在Observable订阅后触发loading状态
    delay(4000),
    finalize(() => this.loading$.next(false))
  );
}

这样loading$.next(true)的执行时机晚于loading$的订阅时机，值不会丢失，能正常触发变更检测。

补充：OnPush变更检测的触发条件 #

OnPush模式下，Angular只会在以下场景触发变更检测：

• 组件的@Input属性引用发生变化
• 组件自身触发DOM事件（如按钮点击）
• 组件内的异步管道接收到新的发射值（前提是订阅已存在）
  首次加载时因为订阅未建立，loading$的发射值无法触发变更检测，这就是问题的核心所在。

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