Angular8管道使用 Pipe

概念

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实例