在Angular中创建自定义管道

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

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

然后，您将自定义管道作为声明包含在您的应用模块中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ReverseStr } from './reverse-str.pipe.ts';

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

{{ user.name | reverseStr }}

带参数的管道

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

@Pipe({name: 'uselessPipe'})
export class uselessPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

你会这样称呼它：

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

请注意我们如何使用 ES6 的字符串插值来如此轻松地构造新字符串：`${before} ${value} ${after}`