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

问题描述

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

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

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

解决方法

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

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

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

,

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