Angular OnPush не обновляет шаблон

Question

У меня есть два компонента, оба из которых установлены на OnPush.Родительский компонент устанавливает accountLoading в значение true при вызове getAccount(), а затем устанавливает accountLoading в значение false после завершения вызова.Как и ожидалось, консоль выводит:

this.accountLoading true

, за которым следуют:

this.accountLoading false

Тем не менее, шаблон не обновляется и застрял, думая, что accountLoading это правда.Как получить шаблон для обновления, как ожидается, при изменении значения?Я хотел бы сохранить обнаружение изменений как OnPush.

Родительский компонент:

TypeScript:

public accountLoading: boolean;
...

getAccount() {
  this.accountLoading = true;
    this.authStore
        .pipe(select(fromAuthStore.getAccountData))
        .subscribe(account => {
          if (account) {
            this.accountLoading = false;
          }
          console.log('this.accountLoading', this.accountLoading);
        });

  // Loading account if it hasn't yet been loaded
  this.authService.getAccount();
}

HTML:

<child-component
  [accountLoading]="accountLoading">
</child-component>

дочерний компонент :

TypeScript:

@Input() accountLoading: boolean;
...

HTML:

<p *ngIf="accountLoading">
  Loading...
</p>

Answer 1

Попробуйте тему поведения

public accountLoading$: BehaviorSubject<boolean>(false);
...

getAccount() {
  this.accountLoading$.next(true);
    this.authStore
        .pipe(select(fromAuthStore.getAccountData))
        .subscribe(account => {
          if (account) {
            this.accountLoading$.next(false);
          }
        });

  // Loading account if it hasn't yet been loaded
  this.authService.getAccount();
}

и используйте асинхронный канал в шаблоне

<p *ngIf="accountLoading$ | async">
  Loading...
</p>

Я написал библиотеку, чтобы позаботиться о многих видах такого управления состояниемhttps://github.com/adriandavidbrand/ngx-rxcache. Прочитайте об этом здесь https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

Answer 2

Я бы сделал это со стандартным наблюдаемым шаблоном:

public accountLoading$: Observable<boolean>;

...

getAccount() {
   this.accountLoading$ = this.authStore
        .pipe(select(fromAuthStore.getAccountData), map(account => !!account));


  // Loading account if it hasn't yet been loaded
  this.authService.getAccount();
}

HTML:

<child-component
  [accountLoading]="accountLoading$ | async">
</child-component>

Answer 3

Если оба ваших компонента используют стратегию обнаружения изменений OnPush, дочерний шаблон не будет обновляться, если родительский шаблон.Ваш дочерний компонент должен будет реализовать ловушку жизненного цикла OnChanges, и вы можете инициировать обнаружение изменений там, когда значение входа изменяется.