内置管道、自定义管道、纯管道、非纯管道

内置管道

1
2
3
4
5
6
7
8
<p>DatePipe {{ birthday | date: 'yy/MM/dd EEE' }}</p>
<p>JsonPipe {{ Json | json }}</p>
<p>UpperCasePipe {{ UpperCase | uppercase }}</p>
<p>LowerCasePipe {{ LowerCase | lowercase }}</p>
<p>Decimal {{ Decimal | number: '3.1-5' }}</p>
<p>CurrencyPipe  {{ money | currency: 'USD' : true: '3.1-5' }}</p>
<p>PercentPipe {{ PercentPipe | percent }}</p>
<p>SlicePipe {{ SlicePipe | slice: start: end }}</p>

  • DatePipe
    单标志: ‘y/M/d h:m:s’ ‘y/M/d H:m:s’(24小时制)
    双标志: ‘yy/MM/dd hh:mm:ss’ ‘yy/MM/dd hh:mm:ss’(24小时制)
    月: ‘MMM” (Jun) ‘MMMM’(June)
    星期: ‘EEE’ (Fri) ‘EEEE’ (Friday)

  • Decimal
    expression | number: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

    • minIntegerDigits: 整数部分保留最小的位数，默认为1
    • minFractionDigits: 小数部分保留最小的位数，默认为0
    • maxFractionDigits: 小数部分保留最大的位数，默认为3

  • CurrencyPipe
    expression | currency[: currencyCode[: symboDisplay[: digitInfo]]]

    • currencyCode: 格式化的目标货币格式。CNY(人民币)、USD(美元)、RUR(欧元)
    • symbolDisplay： 该类型货币的哪种格式显示，布尔值，true（￥），false（人民币）
    • digitInfo: 与Decimal格式一致

  • PercentPipe
    expression | percent[: digitInfo]

    • digitInfo: 与Decimal格式一致

  • SlicePipe
    expression | slice: start[: end]
    基于Array.prototype.slice()和String.prototype.slice()

自定义管道

1
2
3
4
5
6
7
8
9
10
11
12
import { Pipe, PipeTransform } from '@angular/core'
@Pipe({ name: 'sexReform', pure: false })
export class SexReform implements PipeTransform {
  transform(val: string): string {
    switch (val) {
      case 'male': return '男';
      case 'female': return '女';
      default: return '性别未知'
    }
  }
}
  • @Pipe中name为管道的名称，pure指定为纯管道或者非纯管道
  • transform中的参数
  • 在declarations中引入管道

纯管道与非纯管道（重点理解）

  • 纯管道

    Angular只有在它检测到输入值发生了纯变更时才会执行纯管道。纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。

  • 非纯管道

    Angular会在每个组件的变更检测周期中执行非纯管道。 非纯管道可能会被调用很多次，和每个按键或每次鼠标移动一样频繁。