Angular独立组件Observable更新时闪烁问题的排查与解决

可能原因及对应解决方案 #

1. Observable每次发射新对象引用，触发不必要的组件渲染 #

即使启用了OnPush变更检测策略，当achatTitreViaTpv每次发射全新的AchatTitreViaTpv对象时，AsyncPipe会检测到引用变化，触发组件的变更检测与重新渲染，进而导致视觉闪烁。

解决办法：用distinctUntilChanged过滤无意义的发射
在组件中对Observable做管道处理，只在影响UI的核心字段变化时才发射数据：

import { distinctUntilChanged } from 'rxjs';

export class GestionAchatTpvGenerationProgressBarComponent {
  @Select(GestionAchatTpvDetailState.recupereAchat) private achatTitreViaTpvSource!: Observable<AchatTitreViaTpv>;

  // 处理后的Observable，只在关键数据变化时更新
  achatTitreViaTpv$ = this.achatTitreViaTpvSource.pipe(
    // 自定义比较逻辑，只对比进度、剩余时间等影响UI的字段
    distinctUntilChanged((prev, curr) => {
      return prev.progression === curr.progression && 
             prev.tempsRestant === curr.tempsRestant;
    })
  );
}

模板中切换为使用处理后的achatTitreViaTpv$：

<ng-container *ngIf="achatTitreViaTpv$ | async as achat">
  <!-- 原有内容 -->
</ng-container>

2. 模板内动态样式绑定的逻辑重复计算 #

如果[style.width]绑定的condition是每次变更检测都会重新执行的表达式（比如直接调用方法、复杂计算），会导致频繁的重排重绘，引发视觉闪烁。

解决办法：提前在Observable管道中计算好样式值
将宽度计算逻辑移到数据流中，避免模板内重复计算：

import { distinctUntilChanged, map } from 'rxjs';

achatTitreViaTpv$ = this.achatTitreViaTpvSource.pipe(
  distinctUntilChanged((prev, curr) => prev.progression === curr.progression),
  map(achat => ({
    ...achat,
    progressWidth: `${achat.progression}%` // 提前计算好宽度字符串
  }))
);

模板中直接绑定预计算的值：

<div class="progress-bar-tpv-generation-container__progress-bar--fill" 
     [style.width]="achat.progressWidth"></div>

3. CSS过渡缺失导致进度跳变闪烁 #

如果进度条宽度变化没有平滑过渡，视觉上会呈现突兀的跳变，被感知为“闪烁”。

解决办法：为进度条添加CSS过渡动画
在SCSS中给进度填充元素添加过渡效果：

.progress-bar-tpv-generation-container__progress-bar--fill {
  transition: width 0.2s ease-in-out; // 平滑过渡宽度变化
  /* 原有样式 */
}

4. Observable偶尔发射空值导致容器销毁重建 #

如果achatTitreViaTpv数据流存在偶尔发射null/undefined的情况，*ngIf会销毁内部DOM结构，后续数据恢复时又重建，引发闪烁。

解决办法：确保数据流始终发射有效数据，或添加默认值
用defaultIfEmpty为Observable设置默认值，避免DOM销毁：

import { defaultIfEmpty, distinctUntilChanged } from 'rxjs';

achatTitreViaTpv$ = this.achatTitreViaTpvSource.pipe(
  defaultIfEmpty({ progression: 0, tempsRestant: 0 } as AchatTitreViaTpv),
  distinctUntilChanged((prev, curr) => prev.progression === curr.progression)
);

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