Angular Pipe

Pipe的存在，目的在于进行数据的转换。前后端开发，后端提供的数据，不一定刚好就是要展示的数据，前端经常在拿到原始数据后，进行一次或者多次转换，才展示。

内置Pipe

DatePipe

根据时区格式化

• 采用默认的格式

  1	<p>The hero's birthday is {{ birthday | date }}</p>

• 指定格式

  1	<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

• 指定转换的方法

  1 2 3 4 5 6 7 8 9 10 11 12

  # example.ts template: ` <p>The hero's birthday is {{ birthday | date:format }}</p> <button (click)="toggleFormat()">Toggle Format</button> ` .... birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based toggle = true; // start with true == shortDate get format() { return this.toggle ? 'shortDate' : 'fullDate'; } toggleFormat() { this.toggle = !this.toggle; }

UpperCasePipe

字母转换为大写

• pipe可以链式调用,前者的output,是后者的input

  1	<div> The chained hero's birthday is {{ birthday | date | uppercase}} </div>

LowerCasePipe

字母转换为小写

CurrencyPipe:

根据所在地，进行货币转换

• 可以通过:传递参数

  1	<div>{{ amount | currency:'EUR' }}</div>

• 传递多个参数

  1	<div>{{ amount | currency:'EUR':'Euros '}}</div>

DecimalPipe

十进制处理数字

PercentPipe

数字转百分比

AsyncPipe

JsonPipe

KeyValuePipe

TitleCasePipe

SlicePipe

自定义Pipe

定义类，实现接口 PipeTransform
重载方法transform

1 2 3 4 5 6 7

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent?: number): number { return Math.pow(value, isNaN(exponent) ? 1 : exponent); } }

NgModule中声明即可

1
2
3
4
5
6
7
8
9
10

import { Component } from '@angular/core';

@Component({
  selector: 'app-power-booster',
  template: `
    <h2>Power Booster</h2>
    <p>Super power boost: {{2 | exponentialStrength: 10}}</p>
  `
})
export class PowerBoosterComponent { }

数据转义

angular8 中内置一下几种：

• bypassSecurityTrustHtml - 防止html中注入script脚本
• bypassSecurityTrustStyle
• bypassSecurityTrustScript
• bypassSecurityTrustUrl
• bypassSecurityTrustResourceUrl

定义转义safe，传递不同参数即可

• 使用如下命令：

  1	ng generate pipe safe

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'; @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(protected sanitizer: DomSanitizer) {} public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { switch (type) { case 'html': return this.sanitizer.bypassSecurityTrustHtml(value); case 'style': return this.sanitizer.bypassSecurityTrustStyle(value); case 'script': return this.sanitizer.bypassSecurityTrustScript(value); case 'url': return this.sanitizer.bypassSecurityTrustUrl(value); case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value); default: throw new Error(`Invalid safe type specified: ${type}`); } } }

  模块中声明pipe，同时引入模块BrowserModule

  1 2 3 4 5 6 7 8 9 10 11 12 13

  @NgModule({ declarations: [ AppComponent, SafePipe ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent], exports: [UserComponent, SafePipe] })

  使用

  1 2 3

  <img src="imgUrl | safe:'resourceUrl'"> <script src="url | safe:'url'">