管道

前面已经提过管道的概念, 下面来深入剖析管道的用法

内置管道

常用的内置管道有:

UpperCasePipe 把文本转换成全大写形式。格式:

{{ value_expression | uppercase }}

LowerCasePipe 把文本转换成全小写形式。格式:

{{ value_expression | lowercase }}

DecimalPipe

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

digitsInfo 数字展现的选项,通过如下格式的字符串指定:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  • minIntegerDigits:在小数点前的最小位数。默认为 1。
  • minFractionDigits:小数点后的最小位数。默认为 0。
  • maxFractionDigits:小数点后的最大为数,默认为 3。
@Component({
  selector: 'app',
  template: `
<div>
  <!--output '2.718'-->
  <p>e (no formatting): {{e | number}}</p>
  <!--output '002.71828'-->
  <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
  <!--output '0,002.71828'-->
  <p>e (4.5-5): {{e | number:'4.5-5'}}</p>
  <!--output '3.14'-->
  <p>pi (no formatting): {{pi | number}}</p>
  <!--output '003.14'-->
  <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p>
  <!--output '003.14000'-->
  <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
  <!--output '-3' / unlike '-2' by Math.round()-->
  <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p>
</div>
`
})
export class AppComponent {
  pi: Number = 3.14;
  e: Number = 2.718281828459045;
}

DatePipe

  • DatePipe 根据区域设置规则格式化日期值。格式:
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
@Component({
  selector: 'app-heroes',
  template: `
<!-- Dec 24, 2018 -->
<p>{{ dateObj | date }}</p>
<!-- Dec 24, 2018, 12:26:46 AM -->
<p>{{ dateObj | date:'medium' }}</p>
<!-- 26:46 AM -->
<p>{{ dateObj | date:'shortTime' }}</p>
<!-- 2018-12-24 00:26:46 -->
<p>{{ dateObj | date:'yyyy-MM-d HH:mm:ss' }}</p>
`
})
export class HeroesComponent {
  dateObj: Date = new Date();
}

自定义管道

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress