概念

1. 每个应用开始的时候差不多都是一些简单任务：获取数据、转换它们，然后把它们显示给用户。 获取数据可能简单到创建一个局部变量就行，也可能复杂到从 WebSocket 中获取数据流。
2. 一旦取到数据，你就可以把它们原始值的 toString 结果直接推入视图中。 但这种做法很少能具备良好的用户体验。 比如，几乎每个人都更喜欢简单的日期格式，例如1988-04-15，而不是服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。
3. 显然，有些值最好显示成用户友好的格式。你很快就会发现，在很多不同的应用中，都在重复做出某些相同的变换。 你几乎会把它们看做某种 CSS 样式，事实上，你也确实更喜欢在 HTML 模板中应用它们 —— 就像 CSS 样式一样。
4. 通过引入 Angular 管道（一种编写”从显示到值”转换逻辑的途径），你可以把它声明在 HTML 中。

一、内置管道

<h1>内置管道</h1> <p style="font-weight: bold;">1.日期：</p> <p style="color:red;">管道可以同时使用多个，链式管道。</p> <p>生日(日期大小写显示)：{{birthday | date | uppercase}}</p> <p style="color:red;">参数用冒号隔开</p> <p>生日(格式化日期)：{{birthday | date:"yyyy-MM-dd hh:mm:ss"}}</p> <p>生日(短日期)：{{birthday | date:"shortDate"}}</p> <p>生日(长日期)：{{birthday | date:"fullDate"}}</p> <p style="font-weight: bold;">2.大小写转换：</p> <p>转成大写：{{titleSmall | uppercase}}</p> <p>转成小写：{{titleSmall | lowercase}}</p> <p style="font-weight: bold;">3.货币百分比小数点：</p> <p>小数点<span style="color:red;">（'1.3-3':小数点前保留1位，小数点后保留3至3，即3位）</span>：{{2.030256287 | number: "1.3-3"}}</p> <p>货币默认：{{20 | currency}}</p> <p>货币格式：{{20 | currency: '￥'}}</p> <p>百分比默认：{{0.2 | percent}}</p> <p>百分比位数：{{0.2 | percent: '1.1-1'}}</p> <p style="font-weight: bold;">4.json格式：</p> <p>{{userinfo | json}}</p> 

二、自定义管道

html

 <h1>自定义管道</h1> 底数：<input type="text" [(ngModel)]="bottom">  指数： <input type="text" [(ngModel)]="top">  结果:{{bottom | pipes: top}} 

创建自定义管道

ng g pipe 路径文件名 

ts

import { Pipe, PipeTransform } from '@angular/core';  @Pipe({   name: 'pipes' }) export class PipesPipe implements PipeTransform { transform(value: any, ...args: any[]): any {     console.log(value);     console.log(args); return Math.pow(value, args[0]); } } 

三、非纯 AsyncPipe

html

<h1>非纯 AsyncPipe</h1> <p>{{message$ | async}}</p> 

ts

import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs/internal/Observable'; import { interval } from 'rxjs'; import { map, take } from 'rxjs/operators';  @Component({   selector: 'app-pipes',   templateUrl: './pipes.component.html',   styleUrls: ['./pipes.component.css'] }) export class PipesComponent implements OnInit {    birthday = new Date('1996-07-01 10:00:00');   titleSmall = 'lvxin';   titleBig = 'LVXIN';   userinfo: any = {     name: ' lvxin',     age: 25 };   bottom = 2;   top = 10;   message$: Observable<string>; private messages = [ 'You are my hero!', 'You are the best hero!', 'Will you be my hero?' ]; constructor() { this.resend(); } ngOnInit() { } resend() { this.message$ = interval(500).pipe( map(i => this.messages[i]), take(this.messages.length) ); } } 

四、效果

五、学习地址

Angular官网
gitHub实例