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

Question

I want to add custom ordering and filtering functions to my app and would like them to be reusable (across multiple components). The said functions will be used to allow users to order list/table contents and filter arrays in my templates. In addition, some of the content can be dynamically modified following a user's actions (ex.: if, through our database, a remote user adds a new element to the collection listed in a table, the updated data on the local user should respect the previously applied ordering/filtering). It is my understanding that pipes wouldn't really be the best option in such cases since changes of the sort are impure .

With a pure pipe, Angular ignores changes within composite objects, such as a newly added element of an existing array, because checking a primitive value or object reference is much faster than performing a deep check for differences within objects. Angular can quickly determine if it can skip executing the pipe and updating the view.

Is my understanding of pure/impure changes mistaken? If not, what would be a good alternative to implement reusable orderBy/filterBy functions?

Answer 1

You are correct, if you have an array, and its elements are changed, a pure pipe will not update if the array's reference stays the same.

I recommend you consider a reactive approach, using a BehaviorSubject / Observable and the async pipe to emit data to your view. This will trigger change detection whenever new data is emitted, and you are free to use pure pipes to filter your data.

Here is a solid article about using the async pipe.

Answer 2

impure pipes wouldn't be performant, but pure pipes would be, so it is the best approach, yes Angular wouldn't detect composite changes, that's why immutability is great.