Angular结合ChangeDetectionStrategy.OnPush使用ngStyle的视图更新问题

问题背景 #

组件使用OnPush变更检测策略，通过ngStyle绑定backgroundColor属性，在ngAfterViewInit()中更新backgroundColor为yellow后，视图未同步更新，调用this.cdr.markForCheck()无效。

原因分析 #

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

• 组件@Input属性变更
• 组件内部触发用户事件
• 手动触发变更检测流程

markForCheck()仅标记组件需在下一次变更检测周期中检查，但ngAfterViewInit()钩子执行时初始变更检测已完成，无法立即触发更新。

解决方案 #

方案1：手动触发即时变更检测 #

注入ChangeDetectorRef后，调用detectChanges()立即触发当前组件的变更检测：

import { Component, AfterViewInit, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1 [ngStyle]="{'background-color':backgroundColor}">Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelloComponent implements AfterViewInit {
  name = 'Angular';
  backgroundColor = 'blue';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.backgroundColor = 'yellow';
    this.cdr.detectChanges(); // 立即执行变更检测
  }
}

方案2：使用可观察对象配合async管道（推荐） #

将属性包装为BehaviorSubject，通过async管道自动触发变更检测，更符合OnPush的设计理念：

import { Component, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1 [ngStyle]="{'background-color': backgroundColor$ | async}">Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelloComponent implements AfterViewInit {
  name = 'Angular';
  private backgroundColorSubject = new BehaviorSubject<string>('blue');
  backgroundColor$ = this.backgroundColorSubject.asObservable();

  ngAfterViewInit() {
    this.backgroundColorSubject.next('yellow');
  }
}

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