Angular 2 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器) 的作用的是一样的。它们都是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。
Angular 2 内建管道及分类
String -> String
UpperCasePipe
LowerCasePipe
TitleCasePipe
Number -> String
DecimalPipe
PercentPipe
CurrencyPipe
Object -> String
JsonPipe
DatePipe
Tools
SlicePipe
AsyncPipe
I18nPluralPipe
I18nSelectPipe
Angular 2 内建管道使用示例
1.大写转换
<div>
<p ngNonBindable>{
{ 'Angular' | uppercase }}</p>
<p>{
{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>
2.小写转换
<div>
<p ngNonBindable>{
{ 'Angular' | lowercase }}</p>
<p>{
{ 'Angular' | lowercase }}</p> <!-- Output: angular -->
</div>
3.数值格式化
<div>
<p ngNonBindable>{
{ 3.14159265 | number: '1.4-4' }}</p>
<p>{
{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>
4.日期格式化
<div>
<p ngNonBindable>{
{ today | date: 'shortTime' }}</p>
<p>{
{ today | date: 'shortTime' }}</p> <!-- Output: 以当前时间为准,输出格式:10:40 AM -->
</div>