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

时间:2017-08-23 20:21:45

标签: arrays angular immutability ngrx-store

我非常感谢ngrx / store和Angular 2在使用视频组件或任何其他组件时的任何帮助,不应该销毁和重新初始化。

这里的问题是每次数组中视频容器组件的状态发生变化(以不可变的方式),此组件将被销毁并重新创建

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

如果没有ngrx / store和immutable状态,当更改数组项时,它运行良好,视频容器不会重新初始化。但是当我用ngrx / store使用不可变的管理状态的方式时,需要创建全新的数组,如果某些视频参数(或图表配置)发生变化,则必须以不可变的方式更新数组中的对象。 。它看起来像这样:

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

但Angular 无法识别第n个组件不需要重新初始化,因为对象引用已更改。我不确切地知道区域检测是如何在内部工作的,但看起来当对象被克隆到列表中时,引用会丢失并且组件被破坏并且创建了全新的组件(并且视频从头开始/ jquery组件重新初始化。)

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

https://plnkr.co/edit/H6h1PSGAG4LNPBIIrKEy?p=preview

我创造了plunker示例。那里的内部计数器属性代表“正在播放的视频”。该示例显示当通过Object.assign(...)更改数组中元素的状态时(此处为id为1的项的“desc”属性),将创建全新组件并且计数器再次从0开始递增在它被摧毁并再次重新初始化之后。

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

哦,我解决了。它与ngrx / store没什么关系。只是,Angular跟踪如何改变ngFor。

可以使用" trackBy"更改策略。 ngFor中的参数。我现在可以创建函数,跟踪对象的标识符而不是其引用的更改。如果其他人有同样的问题,有关" trackBy"的更多信息。在这里描述:

http://blog.angular-university.io/angular-2-ngfor/#howtousetrackby