Angular2中Pipe的用法

Pipe的作用

• 都是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等。

Angular2的内建管道和分类

• String -> String

  UpperCasePipe

  LowerCasePipe

  TitleCasePipe

• Number -> String

  DecimalPipe

  PercentPipe

  CurrencyPipe

• Object -> String

  JsonPipe

  DatePipe

• Tools

  SlicePipe

  AsyncPipe

  I18nPluralPipe

  I18nSelectPipe

  Angular2内建常用管道使用

  • 大写转换

<div>
  <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
  <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

• 小写转换

<div>
  <p ngNonBindable>{{ 'Angular' | lowercase }}</p>
  <p>{{ 'Angular' | lowercase }}</p> <!-- Output: angular -->
</div>

• 数值格式化

<div>
  <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
  <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>

• 日期格式化

<div>
  <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

Javascript对象序列化

<div>
  <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
  <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

管道参数

• 管道可以接收任意数量的参数，使用方式是在管道名称后面添加 : 和参数值。如 number: '1.4-4' ，若需要传递多个参数则参数之间用冒号隔开，具体示例如下：

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
  <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
</div>

管道链

• 可以将多个管道连接在一起，组成管道链对数据的处理

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
  <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <!-- Output: SEM -->
</div>

自定义管道

自定义管道步骤

• 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
• 实现 PipeTransform 接口中定义的 transform 方法

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

@Pipe({name:'dic2string'})
export class DicToStringPipe implements PipeTransform {
    transform(value: any) {
        var ret = "man:"+value[0]+"%;" +"female:"+value[1]+"%;"+"other:" +value[2]+"%";
        return ret;
        
    }
}

 <tr *ngFor="let item of nzTable.data;">
                                <td class="overflow-td">{{ item.nameOfDistributionType }}</td>
                                <td class="overflow-td">{{ item.numberOfPatients }}</td>
                                <td class="overflow-td">{{ item.proportion }}%</td>
                                <td class="overflow-td">{{ item.ratioOfGender| dic2string }}</td>
                                <td class="overflow-td"></td>
                                <td class="overflow-td"></td>
                            </tr>

• 在app.module.ts中声明

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        DicToStringPipe
    ],
    imports: [
       
    ],
    providers: [
        {
            provide: NZ_I18N, useValue: en_US
        }
    ],
    entryComponents: [
    ],
    exports: [
    ]
})