angular - ngrx 在网格中突出显示新添加的项目

Question

我正在使用 ngrx(redux) 并且我有一个显示的项目列表（虚拟滚动）。单击工具栏添加按钮时，我会调度添加操作，reducer 会向列表中添加一个对象并返回新状态。

如何突出显示新创建的行？

我应该保持一个新属性的状态，该属性的 ID 是新创建的记录吗？我可能还必须在视图中滚动新创建的项目。因为随着列表的虚拟滚动，如果用户滚动列表，组件可能会被破坏并重新创建。

Answer 1

是的，对于刚刚创建的那个，将 isHighlighted 设置为 true。假设您使用 reselect.js 之类的东西来编写选择器，那么您可以将此列表映射到您的 Item哑组件。

然后在您的 Item 哑组件中，如果 isHighlighted 为真，那么您将突出显示。

就虚拟滚动会发生的额外复杂性而言，Store 不应该关心 dom 元素被破坏或重新创建。因此，如果您突出显示的 Item 组件从 dom 中删除，该项目仍应保留在 Store 中。