Question

在Angular 1中，当我们要格式化表达式的值以便向用户显示时，我们使用angular 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？

Answer 1

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

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

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

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

过滤，尤其是分类是昂贵的操作。用户   即使是中等规模的名单，经验也会严重降低   Angular每秒调用这些管道方法很多次。过滤器和   orderBy经常被滥用在Angular 1应用程序中，导致   抱怨Angular本身很慢。这笔费用是公平的   间接感觉Angular 1准备了这个性能陷阱   首先提供过滤器和订单。

为什么有角度2＆＃34;过滤器＆＃34;被称为＆＃34; Pipe＆＃34;？

1 个答案: