使用onpush更改检测的最佳方法

1. 使用可观测数据 async 管道是一个非常有效的选择,我经常使用。角可以检查什么时候一个可观测发射值,它标记您的组件,以检测变化。
2. 不可变的.js也是一个有效的选项,但是我个人觉得有点过于冗长。在我目前的项目中,我更喜欢使用 ES6 spread operator . 例如,要更新属性,请使用 const newObj = {...obj, prop: newValue} ,将项插入数组 const newArray = [...array, newItem] . 但是,您必须确保整个团队都采用这种方法,因为无法像使用不可变的.js那样强制实现不可变。

我的团队正在使用 page - component 模式。例如,我们需要创建一个功能来更新用户详细信息。在这种情况下,我会创建 user-page.component 和 user-form.component . 用户页组件 是一个容器 用户窗体组件 .

用户窗体组件 具有changedetectionstrategy.onpush,并且它不与服务交互,它只具有许多输入属性(例如 @Input user: User )并发出@output事件(例如 @Output update = new EventEmitter<User>() )它是一个 哑的 '只更新窗体并发出事件的组件。

用户页组件 是与服务交互、设置输入属性和侦听 用户窗体组件 事件。它的模板标记通常只包含子组件:

<app-user-form [user]="user$ | async" (update)="onUpdate($event)"></app-user-form>

用户$ 是一个可观察的,来自服务或商店,它被传递到 用户窗体组件 通过 异步的 管子。 更新 是当用户单击“更新”按钮时调用的函数 用户窗体组件 它调用API服务来更新用户的详细信息。

遵循此模式,可以分离与服务交互的组件和只显示数据的组件,从而允许您控制更改检测。顺便说一句 NGRX official example app 使用相同的方法。