angular管道操作符的使用

一、Angular的常用内置管道函数

比如说很多时候我们需要把数字显示成金额、大小写转换、日期小数转换等等。

Angular管道对于象这样小型的转换来说是个很方便的选择。

管道是一个简单的函数，它接受一个输入值，并返回转换结果。

下面说一些常用的管道：

1、大小写转换管道

uppercase将字符串转换为大写

lowercase将字符串转换为小写

<p>{{str | uppercase}}-{{str1 | lowercase}} </p>  //str:hello str1:WORLD

 页面上显示：HELLO-world

2、日期管道

date：日期管道符可以接受参数，用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today = new Date();

页面上显示：现在的时间是2019-04-02 16:08:10

3、小数管道

number管道用来将数字处理为我们需要的小数格式

接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数} 

其中最少整数位数默认为1 

最少小数位数默认为0 

最多小数位数默认为3 

当小数位数少于规定的{最少小数位数}时，会自动补0 

当小数位数多于规定的{最多小数位数}时，会四舍五入

<p>num保留4位小数的值是：{{num | number:'3.2-4'}}</p>

num = 125.156896;

页面上显示：num保留4位小数的值是：125.1569

4、货币管道

currency管道用来将数字转换为货币格式

  <p>数量：{{count}}</p>
  <p>价格：{{price}}</p>
  <p>总价：{{(price * count) | currency:'￥'}}</p>

  count = 5;
  price = 1.5;

页面上显示：

数量：5

价格：1.5

总价：$7.50

以上是最初的学习angular时候的笔记，现在再次用到angular，打算简直在项目里面运行一下，发现报乱码错误，知道为什么？时间比较着急，所以也就没深究了，可能是angular自身的做了一些改变，版本使用方法的问题。

然后查了一下，看到网上有另外一种用法，试了一下是可以的，下面贴了代码：

<span>{{num | currency: 'CNY':'symbol-narrow'}}</span>

然后在app module文件中引入：

import { LOCALE_ID } from '@angular/core';
@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "ch-CN" }
  ]
})

5、字符串截取

slice：start[：end]与java中substring类似

<p>{{name | slice : 2 : 4}}</p>

name = '只对你说';

 页面上显示：你说

6、json(数据)格式化

<div>
  <p>{{ { name: 'semlinker' } | json }}</p>
</div>

页面上显示：{ "name": "semlinker" }

二、自定义管道（过滤器）方法

 1、命令行新建一个管道multiple：

ng g pipe pipe/multiple

新建管道之后默认会在在app.module.ts文件中声明

2、multiple.pipe.ts示例：

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

@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {

  transform(value: any, args?: any): any {//value:输入值 args:参数
    if(!args){//无参的情况下
      args = 1;
    }
    return value*args;
  }

}

 3、在视图模板中使用示例：

<p>测试管道用法:{{size | multiple}}</p>

<p>测试管道用法:{{size | multiple:'7'}}</p> //传参

请注意以下几点：

• 你使用自定义管道的方式和内置管道完全相同。

• 你必须在 AppModule 的 declarations 数组中包含这个管道。