Angular 2 + ngrx/store - 避免重新初始化数组中的组件

Angular 2 + ngrx/store - avoid reinitialization of components in array

在处理视频组件数组或任何其他不应被销毁和重新初始化的组件时，我将不胜感激对 ngrx/store 和 Angular 2 的任何帮助。

这里的问题是，每次数组中视频容器组件的状态发生变化时（以不可变的方式），这个组件会被销毁并重新创建.

另一个类似的用例是包装 jquery 图表组件的组件数组，不应在每次其配置状态更改时重新创建。

没有 ngrx/store 和不可变状态，当数组的项目改变时，它工作正常并且视频容器不会重新初始化。但是当我使用 ngrx/store 的不可变方式管理状态时，需要创建全新的数组，如果某些视频参数（或图表配置）发生变化，则有必要以不可变方式更新数组中的对象以及。它可能看起来像这样：

[...container.slice(0, n), Object.assign({}, container[n], modifyObj), ...container.slice(n+1)]

但是Angular不承认第n个组件不需要重新初始化，因为对象引用已经改变。我不确切地知道区域检测在内部是如何工作的，但看起来当对象在列表中被克隆时，引用丢失并且组件被销毁并创建全新的组件（视频从 beginning/jquery 组件重新初始化）。

是否有可能更改数组项检测行为或任何其他方式以在数组中同时拥有不可变状态和长期存在的组件？

我创建了 plunker 示例。那里的内部计数器属性代表 "video is playing"。该示例显示，当通过 Object.assign(...) 更改数组中元素的状态时（此处为 id 为 1 的项目的 "desc" 属性），将创建全新的组件并启动计数器销毁并重新初始化后再次从0开始递增。

感谢您的帮助。

哦，我解决了。它与 ngrx/store 无关。只是 Angular 如何跟踪 ngFor 的变化。

可以使用 ngFor 中的 "trackBy" 参数更改策略。我现在可以创建函数，该函数通过对象的标识符而不是其引用来跟踪更改。如果其他人有同样的问题，请在此处描述有关 "trackBy" 的更多信息：