管道与动画

管道：对模板中的值进行格式处理以达到期望的显示效果，其操作符为（‘ | ’）;

1.内置管道:  {{ 输入值 | 管道：参数：参数：参数}}

（1）data(日期格式化）

<p>birthday is {{ birthday | date }}</p>// April 15, 1988

（2）uppercase(转大写），lowercase（转小写）

      <p>将字符串转换为大写{{str | uppercase}}</p>

（3）number小数格式化，参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数} 

<p>圆周率是{{pi | number:'2.2-4'}}</p>

（4）currency：用来将数字转换为货币格式

<p>{{b | currency:'USD':true:'4.2-2'}}</p>//$0156.23        true显示$

（5) async 异步管道。

（6）json：字符串格式化json为

<p>{{myForm.value | json}}</p>

2. 管道参数化

 {{ 输入值 | 管道：参数：参数：参数}}

<p>birthday is {{birthday| date:'yyyy-mm-dd HH:mm:ss':'+9000'}}</p>//1988-03-15 12:30:21

注：也可将参数绑定成变量，使用函数来修改参数

3. 链式管道

{{ birthday | date:'fullDate' | uppercase}}

4. 自定义管道：必须在AppModule的declarations数组中包含这个管道

模板：<p>Super power boost: {{ 2 | exponentialStrength: 10}}</p>

transform（输入的原始值，【可选参数，eg:data的日期格式】);

二、动画

动画：定义元素在某个状态下的样式显示

状态：

自定义状态

*：指向任一状态

void：指向空状态（可用于最后一个一状态的转换，进行离场设置）