Angular 2+ 中的管道

在 Angular 2+ 中，管道是一种很好的方式，可以在模板中直接对数据进行转换和格式化。Angular 默认提供了一些管道，用于处理日期、货币、百分比和字符大小写，但你也可以很容易地定义自己的自定义管道。以下是一个示例，我们创建了一个管道，用于接受一个字符串并颠倒其中字母的顺序。以下是代码，应该放在你的应用文件夹中的 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}`