angular 管道使用实例及自定义管道

angular pipe

angular中的管道(pipe)是用来数据进行处理，如大小写转换、数值和日期格式化等

pipe instance

1. 大小写

<p>{{str | uppercase}}</p>//转换成大写
<p>{{str | lowercase}}</p>//转换成小写

2. date

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

3. 位数

//接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数} --//保留2~4位小数

<p>{{p | number:'1.2-4'}}</p> 

4.json

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

5. slice

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

6. 管道链

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

自定义管道

pipe 定义

import {Pipe, PipeTransform} from '@angular/core';
[@Pipe](/user/Pipe)({name: 'repeat'})
export class RepeatPipe implements PipeTransform {
    transform(value: any, times: number) {
        return value.repeat(times);
    }
}

pipe 使用

<div>
   <p ngNonBindable>{{ 'lo' | repeat:3 }}</p>
   <p>{{ 'lo' | repeat:3 }}</p> <!-- Output: lololo -->
</div>