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

Question

使用OnPush变更检测使更改变得灵活，并且在测试中也非常简单的方法是什么？通过各种教程，我发现了如何使用OnPush

1. 首先是直接从服务中使用可观察的主题，我不确定这种方法是否有效。https://blog.angular-university.io/onpush-change-detection-how-it-works/。
2. 另一种选择是使用immutable.js，但在本例中，我不知道这对于创建对象是否非常灵活，我知道在列表的情况下会更容易。

也许你知道不同的方法然后我列出了这个？

Answer 1

1. 在async管道中使用可观测值是一个非常有效的选项，我经常使用。角是能够检查何时一个可观察的发射值，它标记您的组成部分，以检测变化。
2. Immutable.js也是一个有效的选择，但是我个人觉得有点过于冗长了。在我当前的项目中，我更喜欢使用ES6扩展算子。例如，若要更新属性，请使用const newObj = {...obj, prop: newValue}向数组const newArray = [...array, newItem]插入项。但是，您必须确保整个团队采用这种方法，因为没有办法强制执行不可变性，就像Immutable.js一样。

我的团队正在使用page - component模式。例如，我们需要创建一个功能来更新用户详细信息。在本例中，我将创建user-page.component和user-form.component。组件是用户表单组件的容器。

user-form.component有ChangeDetectionStrategy.OnPush，它不与服务交互，它只是具有许多输入属性(比如@Input user: User)和发射@Output事件(例如@Output update = new EventEmitter<User>())。它是一个“哑”组件，它只更新表单并发布事件。

user-page.component是与服务交互、设置输入属性和侦听user-form.component事件的人。它的模板标记通常只包含子组件：

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

用户$是来自服务或存储的可观察到的，它通过异步管道传递到用户from .组件中。onUpdate是一个函数，当用户单击user-form.component上的更新按钮时调用它，它调用API服务来更新用户详细信息。

遵循此模式，可以分离与服务交互的组件和仅显示数据的组件，从而允许您控制更改检测。顺便说一句，NGRX官方示例应用程序使用了同样的方法。