Angular 2 的Pipe(管道)

Angular 2 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器) 的作用的是一样的。它们都是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等。

Angular 2 内建管道及分类

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• Number -> String

  • DecimalPipe

  • PercentPipe

  • CurrencyPipe

• Object -> String

  • JsonPipe

  • DatePipe

• Tools

  • SlicePipe

  • AsyncPipe

  • I18nPluralPipe

  • I18nSelectPipe

Angular 2 内建管道使用示例

1.大写转换

<div>
  <p ngNonBindable>{
   { 'Angular' | uppercase }}</p>
  <p>{
   { 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

2.小写转换

<div>
  <p ngNonBindable>{
   { 'Angular' | lowercase }}</p>
  <p>{
   { 'Angular' | lowercase }}</p> <!-- Output: angular -->
</div>

3.数值格式化

<div>
  <p ngNonBindable>{
   { 3.14159265 | number: '1.4-4' }}</p>
  <p>{
   { 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>

4.日期格式化

<div>
  <p ngNonBindable>{
   { today | date: 'shortTime' }}</p>
  <p>{
   { today | date: 'shortTime' }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>