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{before} {value} ${after}`
