在 Angular 中构建可重用的自定义和动态过滤/排序的最佳实践是什么 (^11)

如何解决在 Angular 中构建可重用的自定义和动态过滤/排序的最佳实践是什么 (^11)

我想向我的应用程序添加自定义排序和过滤功能，并希望它们可以重复使用（跨多个组件）。上述函数将用于允许用户在我的模板中对列表/表格内容进行排序和过滤数组。此外，某些内容可以根据用户的操作动态修改（例如：如果远程用户通过我们的数据库向表中列出的集合添加新元素，则本地用户的更新数据应尊重先前应用的排序/过滤）。 我的理解是，管道在这种情况下并不是真正的最佳选择，因为 changes of the sort are impure。

使用纯管道，Angular 会忽略复合对象内的更改，例如现有数组的新添加元素，因为检查原始值或对象引用比执行深入检查对象内的差异要快得多。 Angular 可以快速判断是否可以跳过执行管道和更新视图。

我对纯/不纯变化的理解是错误的吗？ 如果不是，那么实现可重用的 orderBy/filterBy 函数有什么好的替代方法？

解决方法

你是对的，如果你有一个数组，并且它的元素发生了变化，如果数组的引用保持不变，纯管道将不会更新。

我建议您考虑一种反应式方法，使用 BehaviorSubject/Observable 和 async 管道将数据发送到您的视图。这将在发出新数据时触发更改检测，您可以自由使用纯管道来过滤数据。

Here is a solid article 关于使用 async 管道。

,

不纯的管道不会有性能，但纯管道会，所以这是最好的方法，是的，Angular 不会检测复合变化，这就是 immutability 很棒的原因。