Angular 异步管道不会触发变更检测

Question

我有这个 class 绑定，它应该在加载时为我的图像设置动画，但它永远不会触发。

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

加载程序：

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))
    );
  }

使用 vanilla javascript works（所以我猜 Loader 代码没问题）：

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');
          }
        }
    );
}

编辑：class 绑定在没有 delay(250) 的情况下也有效，为什么？

class 绑定我哪里做错了？即使 ChangeDetectionStrategy.Default 它也不起作用。

感谢任何解释。

Answer 1

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

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

Angular 异步管道不会触发变更检测

Angular async pipe doesn't trigger change detection

angular

rxjs

angular-changedetection

async-pipe