PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 575|回复: 0
打印 上一主题 下一主题

Angualr4.0中的内置管道是怎样的?

[复制链接]

40

主题

73

帖子

304

积分

中级会员

Rank: 3Rank: 3

积分
304
跳转到指定楼层
楼主
发表于 2017-8-31 20:00:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
Angualr4.0中的内置管道是怎样的?

DatePipe - 对日期/时间数据进行格式变换
在模板中使用date来引用DatePipe。参数用来指定格式:



  1. {{ day | date:'yyMMdd'}}
复制代码


JsonPipe - 将JSON对象转换为字符串,
在模板中使用json来引用JsonPipe,其实现基于JSON.stringify()。 这个管道主要用于调试。


  1. {{ {x:1,y:2} | json }}
复制代码


PercentPipe - 将数值转换为百分比
在模板中使用percent来引用PercentPipe。参数格式同DecimalPipe



  1. {{ 1.23456 | percent:'1.2-3' }}
复制代码


SlicePipe - 提取输入字符串中的指定切片
在模板中使用slice来引用SlicePipe。第一个参数指定切片的起始索引, 第二个参数指定切片的终止索引的下一个。



  1. {{ '01234567890' | slice:1:4 }}
复制代码


UpperCasePipe - 将输入字符串变换为大写
在模板中使用uppercase来引用UpperCasePipe。



  1. {{ "this is a demo" | uppercase }}
复制代码


LowerCasePipe - 将输入字符串变换为小写
在模板中使用lowercase来引用LowerCasePipe。


  1. {{ "WHAT A WONDERFUL WORLD" | lowercase }}

  2.       this.day = new Date();
  3.       this.pi = Math.PI;

  4.     <p>{{ "01234567890" | slice:5:9}}</p>
  5.     <p>{{ "hello angular4.0!" | uppercase }}</p>
  6.     <p>{{ "HELLO ANGULAR4" | lowercase }}</p>
  7.     <p>{{ pi | number:'3.1-10' }}</p>
  8.     <p>{{ pi | percent:'3.1-10'}}</p>
  9.     <p>{{ day | date:'yMMdd'}}</p>
复制代码



分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖 支持支持 反对反对
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2018-6-22 07:18 , Processed in 0.310486 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表