Angular2+ 管道学习第一篇

一．什么是管道？

管道是一个转换器，能将需要显示的值转换为用户能接受的友好模式显示；相当于angular1.x的filter(过滤器)；

二. 怎么使用一个管道？

1. 一个简单的日期管道；

假设你已经用ng new xx好了一个项目；

html:  

<p>The time is{{today | date}}</p>

注：插值表达式{{}} ，管道操作符|，date管道函数 ，所有管道都采用的这种方式  如果ts传入数据的时候不写时分秒，但是取值时又想显示时分秒，默认Am 12:00和date后面传入的表达式有关系

ts:

today:number =Date.now();

date表达式后面参数：

管道表达式：

（计算的是现在时间：所以可能有些不确定，但是记住格式就行）

 

显示结果

{{today | date}}

 Aug 21, 2017

{{today | date : 'medium' }}

 

 Aug 21, 2017, 10:47:59 AM

详情这张表；

当然，还有我们常见的yy-MM-dd格式：

{{today | date : 'yy-MM-dd' }}17-08-21

需要哪种格式，后面写成什么；

 

2.几种常见的管道使用方法

html:  upper="Abroe";

大写转化管道：<p> {{ upper | uppercase}}</p>效果:ABROE

小写转换管道：<p> {{ upper | lowercase}}</p>效果：abroe

货币编码：

注： 货币编码  USD代表美元，EUR代表欧元     number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]     symbolDisplay：是一个boolean类型，true表示会显示货币单位$ 等，false 表示会表示显示货币编码，比如USD.

<p>A: {{a | currency:'USD':false}}</p>

ts:   a: number = 0.259; 效果：A: USD0.26

数值转换：html: <p>A: {{a | percent}}</p>ts: a: number = 0.3353434;
效果：
A: 33.534%
 <!--百分比转换，理论上保留百分比后三位-->
语法：{{expression | number[: digiInfo] }}digiInfo格式:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}即：整数位保留最小位数.小数位保留最小位数-小数位最大保留位置默认值: 1.0-3
当然也可以这样：
html:  <p>B: {{b | percent:'4.3-5'}}</p>
显示效果：
A:0,033.53434%   就是这样的；
类似的转换：
数值格式化： <p>{{ 3.14159265 | number: '1.4-4' }}</p>  
结果：3.1416

JavaScript 对象序列化： <p>{{ { name: 'abore' } | json }}</p> 结果：{"name": "abore" }字符传，数组切割：html: <p> '{{str | slice:0:4}}' </p>ts:  str="abddffg";array_or_string_expression |slice:start[:end]两个参数，表示开始位置和结束位置的索引；

管道可能接受任何数量的可选参数来对它的输出进行微调。我们可以在管道名后面添加一个冒号( : )再跟一个参数值，来为管道添加参数(比如currency:'EUR')。如果我们的管道可以接受多个参数，那么就用冒号来分隔这些参数值(比如slice:1:5)

 

3.管道链

我们可以将多个管道连接在一起，组成管道链对数据进行处理

eg：{{ birthday | date | uppercase}}效果：APR 15, 1993

 

4.对管道进行参数话

参数值可以是任何有效的模板表达式，比如字符串字面量或组件的属性。

<!--format 是一个变量,可以被控制 -->

<p>The hero's birthday is {{ birthday1 | date: format}}</p> get format(){     returnthis.toggle?'shortDate':'fullDate';   }