【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思？

纯管道和非纯管道是相对于管道所传的参数（如上例的 filterKey）而言的。如果管道是纯管道，只监听基本类型的参数的变化或者引用类型引用的变化（  a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object)）；然而， 对于非纯管道，不管是基本类型参数的改变还是引用类型内部数据变化（而非引用变化）都可以触发管道。

@Pipe({name: 'yourPipeName',pure: true // default（纯管道：监听基本类型的参数的变化或者引用类型引用的变化）
})

@Pipe({name: 'yourPipeName',pure: false //（非纯管道：监听所有情况的变化）
})

实验对比

app.component.html

<h1>纯管道：{
   {obj | money }}</h1>
<h1>非纯管道：{
   {obj | moneyPure }}</h1>
<input type="text" [(ngModel)]=obj.text>

app.component.ts

  obj={text :123456.123456};

创建两个管道moneyPurePipe和moneyImpurePipe

ng g p  moneyPurePipeng g p  moneyImpurePipe

money-pure-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'moneyPurePipe',pure: true // default（纯管道：监听基本类型的参数的变化或者引用类型引用的变化）
})
export class MoneyPurePipePipe implements PipeTransform {transform(value: any, ...args: any[]): any {if (value) return (args[0] || '') + parseFloat(parseFloat(value.text).toFixed(2)).toLocaleString() + (args[1] || '');else return 0;return null;}}

money-impure-pipe.pipe.ts（仅仅只有pure:false的差异）

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'moneyImpurePipe',pure: false//（非纯管道：监听所有情况的变化）
})
export class MoneyImpurePipePipe implements PipeTransform {transform(value: any, ...args: any[]): any {if (value) return (args[0] || '') + parseFloat(parseFloat(value.text).toFixed(2)).toLocaleString() + (args[1] || '');else return 0;return null;}}

运行看效果

发现了吗？当obj.text发生变化的时候，只有非纯管道监听了数据变化 

额外的，如果不想用非纯管道也要能够监听obj的变化，可以采用直接绑定对应的属性名

<h1>纯管道：{
   {obj.text | moneyPurePipe }}</h1>

直接绑定obj的text属性，对moneyPurePipe管道稍作修改，只监听数值也能达到非纯管道的功效~

只不过这种pipe扩展性就不大了，根据自己项目需求来调整吧~