角度2+中的Pipes是从模板直接转换和格式化数据的一种很好的方式。开箱即用，您可以获得日期、货币、百分比和字符大小写的管道，但您也可以轻松地定义自己的自定义管道。例如，我们在这里创建了一个管道，它接受一个字符串并颠倒字母的顺序。以下代码将放入您的应用程序文件夹内的一个扭转-str.pipe.ts文件中：

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

然后将定制管道作为声明包含在您的应用程序模块中：

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3import { FormsModule } from '@angular/forms';
4import { HttpModule } from '@angular/http';
5
6import { AppComponent } from './app.component';
7import { ReverseStr } from './reverse-str.pipe.ts';

最后，在您的模板中，您将如何使用此自定义管道：

1{{ user.name | reverseStr }}

带参数的管道

您还可以在管道中定义任意数量的参数，这使您可以将参数传递给管道。例如，下面是一个管道，它在我们提供的字符串之前和之后添加一个字符串：

1@Pipe({name: 'uselessPipe'})
2export class uselessPipe implements PipeTransform {
3  transform(value: string, before: string, after: string): string {
4    let newStr = `${before} ${value} ${after}`;
5    return newStr;
6  }
7}

你会这样称呼它：

1{{ user.name | uselessPipe:"Mr.":"the great" }}

请注意，我们如何使用ES6‘S字符串插值法如此轻松地构造新字符串：${BEFORE}${VALUE}${AFTER}

在 Angular 中创建自定义管道

带参数的管道