为什么 Angular 2“过滤器”被称为“管道”？答案

【问题标题】：Why angular 2 "Filters" are called "Pipe"?为什么 Angular 2“过滤器”被称为“管道”？
【发布时间】：2017-01-25 05:50:03
【问题描述】：

在Angular 1 中，当我们想要格式化表达式的值以显示给用户时，我们使用角度Filters。在Angular 2 中，我们使用Pipe 表示相同。

Angular 1 过滤器：

HTML：

<p> {{ greetings | reverse }}</p>

Js：

app.filter('reverse', function() {
  return function(input, uppercase) {
    input = input || '';
    var out = '';
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  };
});

Angular 2：

HTML：

<p> {{ greetings | reverse }}</p>

打字稿：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'reverse'})
export class ReversePipe {
  transform(input:string): string {
    input = input || '';
    let out = '';
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }
    return out;
  }
}

通过查看代码，可以得出结论，两者都做同样的事情。两者具有相同的角色和责任。我想知道的是为什么在 Angular 2 中将它们重命名为 Pipe？

【问题讨论】：

那么，你想知道pipe是什么吗？
这是因为 ' | ' 运算符，即管道。名称来自运算符名称。
但是管道操作员也有过滤器...为什么要投反对票？我错过了什么吗？

标签： angularjs angular

【解决方案1】：

因为管道有更一般的含义，不仅用于过滤。

您可能还想阅读docs 中关于为什么 Angular 2 中不存在 filter 的段落：

Angular 不附带用于过滤或排序列表的管道。熟悉 Angular 1 的开发人员将它们称为 filter 和 orderBy。 Angular 2 中没有等价物。

这不是疏忽。 Angular 2 不太可能提供这样的管道因为（a）他们表现不佳，并且（b）他们阻止了攻击性缩小。 filter 和 orderBy 都需要参数参考对象属性。我们之前了解到，这样的管道必须不纯，Angular 几乎在每次更改中都调用不纯管道检测周期。

过滤，尤其是排序是昂贵的操作。用户即使是中等大小的列表，在以下情况下，体验也会严重下降 Angular 每秒多次调用这些管道方法。过滤器和 orderBy 经常在 Angular 1 应用程序中被滥用，导致抱怨Angular本身很慢。这个收费是公平的间接感觉 Angular 1 准备了这个性能陷阱首先提供 filter 和 orderBy。

【讨论】：