Angular OnPush策略下Async管道不更新视图，手动订阅却生效？

核心前提：OnPush变更检测触发规则 #

启用OnPush策略的组件，仅在以下场景才会执行变更检测：

• 组件的输入属性引用发生变化（原始类型值变化等同于引用变化）；
• 组件自身触发了DOM事件（如点击、输入）；
• 手动调用ChangeDetectorRef.markForCheck()或detectChanges()；
• 组件模板中使用了async管道（管道内部会自动调用markForCheck()）。

第一种情况（无法更新视图）分析 #

代码回顾 #

// Parent.ts
allowed$: Observable<boolean>;

// Parent.html
<child [allowed]="allowed$ | async"></child>

// Child.ts
@Input() allowed: boolean;
changeDetection: ChangeDetectionStrategy.OnPush

// Child.html
<div>{{allowed}}</div>

无法更新的常见原因 #

1. 输入属性未发生有效变化
   布尔值是原始类型，若allowed$连续发射相同值（如多次发射true），Angular会判定子组件的allowed输入属性没有变化，不会触发子组件的变更检测，视图自然不会更新。

2. 父组件也启用OnPush且变更检测未触发
   如果父组件同样使用OnPush策略，且allowed$的新值是在NgZone上下文之外发射的（比如通过第三方库异步回调），async管道虽然会尝试触发父组件的变更检测，但NgZone外的操作无法被Angular捕获，父组件不会执行变更检测，也就不会将输入变化传递给子组件。

第二种情况（可正常更新视图）分析 #

代码回顾（修正笔误：父组件应直接传递Observable，而非async管道转换后的值） #

// Parent.ts
allowed$: Observable<boolean>;

// Parent.html
<child [allowed$]="allowed$"></child>

// Child.ts
@Input() allowed$: Observable<boolean>;
allowed: boolean;
changeDetection: ChangeDetectionStrategy.OnPush

ngOnInit(){
  this.allowed$.subscribe(latest => {
    this.allowed = latest;
    // 通常需手动触发变更检测，代码可能遗漏此部分
    // this.cdr.markForCheck();
  })
}

// Child.html
<div>{{allowed}}</div>

能正常更新的核心原因 #

1. 订阅回调在NgZone内执行
   如果allowed$来自Angular上下文（如HttpClient响应、Angular事件触发的Subject），订阅回调会在NgZone中执行，Angular会自动触发全局变更检测。即使子组件是OnPush，若订阅回调中手动调用了ChangeDetectorRef.markForCheck()（代码可能遗漏），就能强制子组件执行变更检测，更新视图。

2. 初始化时的变更检测触发
   若allowed$是BehaviorSubject，子组件初始化时会收到初始值，此时子组件会因初始化执行一次变更检测，渲染初始值。后续若订阅回调中正确触发了变更检测，就能持续更新视图。

解决方案（针对第一种情况） #

如果想让第一种情况正常工作，可按以下方式处理：

• 确保allowed$发射的是不同的有效值（对于原始类型，只要值不同即可）；
• 若allowed$在NgZone外发射值，可通过NgZone.run()包裹发射逻辑，或在子组件中手动调用ChangeDetectorRef.markForCheck()；
• 子组件模板中直接使用async管道（而非传递转换后的值），比如：

  <!-- Child.html -->
  <div>{{allowed$ | async}}</div>
  

  这样async管道会在子组件内部触发变更检测，无需依赖父组件的输入变化。

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