时间戳

首页 > 解决方案 > Angular async pipe doesn't trigger change detection

angular - Angular async pipe doesn't trigger change detection

问题描述

I have this class binding which should animate my image while loading, but it never trigger.

<img [class.animated]="loader.isLoading$ | async" src="...">

Loader :

public get isLoading$(): Observable<boolean> {
    return this._isLoading$.pipe(
      // If the data arrives successfully earlier than in 250ms, no indicator should be shown
      switchMap(isLoading => isLoading ? of(true).pipe(delay(250)) : of(false))
    );
  }

Using vanilla javascript works (so I guess the Loader code is fine) :

ngAfterViewInit(): void {
    this.loader.isLoading$.subscribe(
        isLoading => {
          const img = document.querySelector('img') as HTMLImageElement;

          if (isLoading) {
            img.classList.add('animated');
          }
          else {
            img.classList.remove('animated');
          }
        }
    );
}

edit : The class binding works without the delay(250), why ?

Where am I doing wrong with the class binding ? Even with ChangeDetectionStrategy.Default it doesn't work.

Thanks for any explanation.

标签： angularrxjsangular-changedetectionasync-pipe

解决方案

isLoading$()是一个吸气剂，因此每次触发更改检测周期时都会调用它，它将返回一个新的 RxJS 链。async将从前一个取消订阅并订阅新的（可能会在this._isLoading$再次发出后发出）。

所以只保留一条链子。isLoading$()也许在你的组件中使用一个局部变量。

推荐阅读