管道

管道

简介

管道是对数据进行转换和格式化的函数，在模板表达式中{ { ...|... } }

• 可连续多个管道使用，例如{ {...|...|...} }
• 管道可指定一个或多个参数，例如{ {...|... : 'arg1': 'arg2'} }
• 分为纯管道（pure）和非纯管道（impure）

创建管道

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);
  }
}

pure

• 管道定义默认是纯管道，只有检测到纯变更才会执行
• 纯管道必须使用 纯函数 ，它能处理输入并返回没有副作用的值

纯变更：包括原始数据类型的变更、或对象引入的变更

纯函数：如果函数的调用参数相同，则永远返回相同的结果

impure

• 修改装饰器参数pure：false，可定义非纯管道
• 非纯管道对任何类型参数的变更都能响应，但长时间运行会降低应用速度

内置管道

管道	说明
async	非纯管道，转换Observable或Promise
date	转换日期 规则
json	非纯管道，调试时转成字符串
keyvalue	非纯管道，用于NgFor可迭代对象,正常只能循环数组
lowercase	转小写
uppercase	转大写
percent	转百分比，{整数位位数}.{小数位最小位数}.{小数位最大位数}
slice	创建子集 ，[start，end)
currency	转货币,默认美元符号 ，12 | currency:'￥'