Angular - 不纯管道与函数

Question

我正在对 Angular2 中的数组执行过滤操作。当数组中的元素更改时，不会触发纯管道。因此，我必须使用不纯的管道或使用组件内部的函数进行过滤，如下所示。

*ngFor="let item of items | impureFilterPipe"

或者，

<!-- component.html -->
*ngFor="let item of filterFunction(items)"

// component.ts
sortFunction(items) { return items.sort(); }

据我所知，在模板中绑定(bind)一个函数在性能方面很糟糕。但是，我看不出使用不纯管道而不是函数有什么区别。我想知道的是，上面这两种方法的性能有什么区别吗？

Answer 1

正如评论中所指出的，Angular 团队自己建议不要使用管道来过滤或排序集合。解释是，这些管道基本上会在每个变更检测周期运行，即使是小的集合也使得它们非常昂贵。

标准解决方案是控制何时进行排序操作，例如:

*ngFor="let item of filteredItems"

ngOnInit() {
  this.filteredItems = this.items.filter(/***/);
  ...
}

如果您想按需运行它，您也可以将该逻辑包装在它自己的函数中。