什么是管道

还记得第一次接触到 管道 这个概念是在linux终端命令中，通过管道使用grep命令对内容进行过滤。

  1. cat test.txt | grep "pipe"

使用 | 表示创建了一个管道。
值得庆幸的，在Angular的管道和linux中的相似。管道把数据作为输入，然后进行转化处理，并输出转化后的结果。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-hero-birthday',
  5.   template: `<p>The hero's birthday is {{ birthday | date }}</p>`
  6. })
  7. export class HeroBirthdayComponent {
  8.   birthday = new Date(1988, 3, 15); // April 15, 1988
  9. }

在上面的例子中， date 就是Angular内置的日期管道。管道操作符( | )，表示数据从左流动到右侧的date管道中。

内置管道

AsyncPipe

异步管道，用于Observable | Promise 对象。从一个异步回执中解出一个值。

  1. @Component({
  2.   selector: 'async-observable-pipe',
  3.   template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
  4. })
  5. export class AsyncObservablePipeComponent {
  6.   time = new Observable<string>((observer: Observer<string>) => {
  7.     setInterval(() => observer.next(new Date().toString()), 1000);
  8.   });
  9. }

CurrencyPipe

把数字转换成金额字符串， 根据本地化规则进行格式化，这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

  1. {{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
  1. @Component({
  2.   selector: 'currency-pipe',
  3.   template: `<div>
  4.     <!--output '$0.26'-->
  5.     <p>A: {{a | currency}}</p>
  7.     <!--output 'CA$0.26'-->
  8.     <p>A: {{a | currency:'CAD'}}</p>
  10.     <!--output 'CAD0.26'-->
  11.     <p>A: {{a | currency:'CAD':'code'}}</p>
  13.     <!--output 'CA$0,001.35'-->
  14.     <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
  16.     <!--output '$0,001.35'-->
  17.     <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
  19.     <!--output '0 001,35 CA$'-->
  20.     <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
  22.     <!--output 'CLP1' because CLP has no cents-->
  23.     <p>B: {{b | currency:'CLP'}}</p>
  24.   </div>`
  25. })
  26. export class CurrencyPipeComponent {
  27.   a: number = 0.259;
  28.   b: number = 1.3495;
  29. }

DatePipe

DecimalPipe

LowerCasePipe

PercentPipe

SlicePipe

TitleCasePipe

UpperCasePipe

自定义管道

在Angular中使用@Pipe装饰器来创建一个管道。

  1. import { Pipe, PipeTransform } from '@angular/core';
  2. /*
  3.  * Raise the value exponentially
  4.  * Takes an exponent argument that defaults to 1.
  5.  * Usage:
  6.  *   value | exponentialStrength:exponent
  7.  * Example:
  8.  *   {{ 2 | exponentialStrength:10 }}
  9.  *   formats to: 1024
  10. */
  11. @Pipe({name: 'exponentialStrength'})
  12. export class ExponentialStrengthPipe implements PipeTransform {
  13.   transform(value: number, exponent?: number): number {
  14.     return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  15.   }
  16. }