首页 文章

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

提问于
浏览
0

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

这里的问题是 each time the state of video container component in array changes (以不可变的方式), this component is destroyed and recreated again .

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

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

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

但是Angular does not recognise that the n-th component is not need to be reinitialized because the object reference has changed . 我不确切地知道区域检测如何在内部工作,但看起来当对象被克隆到列表中时,参考将丢失并且组件被破坏并且创建了全新的组件(并且视频从头开始/ jquery组件重新初始化) .

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

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

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

谢谢你的帮助 .

1 回答

  • 0

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

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

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

相关问题