NGRX: обновить входные свойства дочерних компонентов без использования ngOnChanges или асинхронного канала

Question

Мне известно, что при использовании Ngrx и архитектуры компонентов Containers / Presentational компонент-контейнер должен быть тем, который связывается с хранилищем и в основном передает данные дочерним компонентам через их открытые свойства Input. Также в качестве дополнительного примечания в компоненте контейнера мы используем стратегию обнаружения изменений OnPush.

Лучший вариант для достижения этого, я полагаю, состоит в том, чтобы передать наблюдаемое в шаблон и развернуть его с помощью асинхронного канала. Что-то вроде

//in the container's component.ts file 
this.file$ = this.store.pipe(takeUntil(this.destroy$), select(getFiles))

// in the container's html.ts
<child-component [sth] = 'files$ | async'

В большинстве случаев, хотя это значение снова используется внутри файла ts контейнера по разным причинам, и поэтому я вынужден использовать что-то вроде

 //in the container's component.ts file 
 this.store
  .pipe(takeUntil(this.destroy$), select(getFiles))
  .subscribe((files: Files[]) => { 
       this.files = files;
  }

// in the container's html.ts
<child-component [sth] = 'files'

. мне либо

Вставить ChangeDetectorRef в Контейнер и вызвать функцию detectChanges, как только я получу значение из наблюдаемого потока.

Или

РеализацияngOnChanges хук жизненного цикла в дочернем компоненте, чтобы проверить, когда изменяется входное значение.

Мне интересно, есть ли лучший способ добиться этого обновления, не используя повсеместное ручное обнаружение изменений? или нужно написать этот шаблонный код в дочерних компонентах с помощью ngOnChanges?

Спасибо.

Answer 1

Зачем вам нужно значение files в вашем компоненте? Не зная вашего варианта использования, я думаю, что это плохая практика (но это может быть необходимо в вашем случае).

Я предпочитаю, чтобы Angular обрабатывал подписки самостоятельно с помощью канала async, чтобы назначать локальныйзначение, которое вы можете использовать tap оператор.

this.file$ =  this.store
  .pipe(
    select(getFiles), // notice, we're not using takeUntil because Angular handles the subscription
    tap(files => { 
     this.files = files; // assign the value here
    })
) 

Теперь вы можете использовать Observable, как и раньше:

<child-component [sth] = 'files$ | async'