Question

我知道，通过使用Ngrx和Containers / Presentational组件体系结构，container-smart组件应该是与商店通信并基本上通过其暴露的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生命周期挂钩，以检查输入值何时更改。

我想知道，是否有更好的方法来实现此更新，而不必不必在整个地方手动使用detectChanges，也不必通过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'

NGRX：无需使用ngOnChanges或异步管道即可更新子组件的输入属性

1 个答案: