*ngIf结合async管道偶发失效问题求助

我之前在项目里也碰到过几乎一模一样的问题！结合你的场景（OnPush变更检测+NGRX Store的Observable），我来拆解下可能的原因和解决思路：

核心原因：Async管道的独立订阅 + OnPush下的元素重建检测遗漏 #

1. 每个Async管道都是独立订阅 #

你模板里用了两次isLoading$ | async，虽然指向同一个Observable，但每个async管道都会创建一个独立的订阅。对于NGRX Store的select流来说，它是热Observable（多播），理论上所有订阅都能同步收到更新，但问题出在OnPush变更检测的触发逻辑上：

• 当isLoading$变为false时，*ngIf对应的<div id="overlay">会被销毁，它的async订阅也会被取消；
• 当isLoading$再次变为true时，Angular会重新创建这个overlay元素，此时新的async订阅会立即获取当前值，但如果此时组件的变更检测没有被触发，这个新元素的渲染就会滞后——而[class.inactive]绑定在始终存在的page-content元素上，它的async订阅从未被销毁，每次值变化都会触发markForCheck()（async管道内部会做这件事），所以总能及时更新。

2. OnPush下元素重建的检测盲区 #

OnPush模式下，组件的变更检测只有在以下情况才会运行：

• 组件的输入属性发生变化；
• 组件内部触发了DOM事件；
• 手动调用markForCheck()或detectChanges()。

当isLoading$从false跳回true时，虽然新的overlay元素被创建，但如果此时没有其他触发变更检测的动作，Angular可能不会立即对这个新元素执行检测，导致*ngIf的状态没有及时同步到视图。而类绑定的元素一直存在，每次值变化都会被async管道标记为需要检测，所以不会有这个问题。

为什么改用类绑定就能解决？ #

当你用[class.loading]代替*ngIf时，overlay元素始终存在于DOM中，async管道的订阅不会被销毁重建。每次isLoading$发出新值，async管道都会自动调用markForCheck()触发组件的变更检测，类的切换自然能及时生效，完全避开了元素重建时的检测盲区。

可行的解决方案 #

方案1：抽离订阅到组件类，避免多个async订阅 #

把isLoading$的订阅统一放到组件里，用一个普通变量存储状态，这样模板里不用多次调用async管道：

import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectIsLoading } from './your-selectors';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent implements OnInit, OnDestroy {
  isLoading = false;
  private destroy$ = new Subject<void>();

  constructor(private store: Store) {}

  ngOnInit() {
    this.store.select(selectIsLoading)
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        this.isLoading = value;
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

模板里直接用变量：

<div id="overlay" *ngIf="isLoading"></div>
<div class="page-content" [class.inactive]="isLoading">
  <router-outlet></router-outlet>
</div>

方案2：给Observable添加共享订阅 #

用shareReplay(1)让所有async管道共享同一个订阅，确保它们收到的是完全同步的值：

import { shareReplay } from 'rxjs/operators';

// 在组件类里定义isLoading$时添加shareReplay
isLoading$ = this.store.select(selectIsLoading).pipe(shareReplay(1));

这样两次async订阅会共享同一个源流，避免因订阅时机差异导致的视图更新不一致。

方案3：手动标记变更检测（兜底方案） #

如果上面的方案都不适用，可以手动触发变更检测，不过不推荐过度使用：

import { Component, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectIsLoading } from './your-selectors';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent implements OnInit, OnDestroy {
  isLoading$ = this.store.select(selectIsLoading);
  private destroy$ = new Subject<void>();

  constructor(private store: Store, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.isLoading$
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.cdr.markForCheck();
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

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