Angular2+ 管道学习第二篇

自定义管道：

ng g p express  新建一个管道

 

import { Pipe, PipeTransform } from '@angular/core';@Pipe({  name: 'express'})export class ExpressPipe implements PipeTransform {  transform(value: number, exponent: string): number {    let exp=parseFloat(exponent);    return Math.pow(value,isNaN(exp)?1:exp);  //幂次方  }}

1.管道是一个带有”管道元数据” 装饰器的类；2.这个管道实现了pipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值；3.当输入的值传给transform方法时，还会带上另一个参数，比如我们这个管道中exponent；4.我们通过@pipe 装饰器告诉Angular：这是一个管道，该装饰器是从Angular的core库引入的；5.这个@Pipe允许我们自定义管道名字；这个名字会运用在模板表达式中，它必须是一个有效的javascript标识符；6.transform方法是管道的基本要素，PipeTransform接口中定义了它，并用它指导各种工具和编译器

如何在组件中使用这个管道？

 <p>This value {{2 | express:10}}</p>结果：This value 1024

若：

  <p>This value {{2 | express:'d'}}</p>结果：This value 2

注意两点：

1.   使用自定义管道的方式和内置管道完全相同；

2.   我们必须在AppModule的declarations数组中包含这个管道；

注意：内置管道就不需要在这里引入

图片管道：

import { Pipe, PipeTransform } from '@angular/core';@Pipe({  name: 'imagepool'})export class ImagepoolPipe implements PipeTransform {  public value;  transform(value: any, args?: string): any {    if(args){      return args;    }    return null;  }}

原理是这样的：外面只要给我图片的编号id；通过管道自动显示图片；

public args;  private _images:Array<ImageItem>=[];  constructor(){     this._images=[         {id:1,url:'./assets/map.jpg'},         {id:2,url:'./assets/FM.jpg'},         {id:3,url:'./assets/news.jpg'}     ]  }   get(id:number) :string{      for(let i=0;i<this._images.length;i++){        if(this._images[i].id===id){         this.args=this._images[i].url;          return this.args;        }      }      return null;   }   getIcon(args:number):number{     return args;   }  <img src={{getIcon(1)|imagepool:get(getIcon(1))}}/>



动态模拟数据：调用getIcon方法即可；
管道类型：
纯管道和非纯管道：
纯管道：Angular只有在它检测到输入值发生了纯变更时才会执行纯管道。纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。Angular会忽略(复合)对象内部的更改。如果我们更改了输入日期(Date)中的月份、往一个输入数组(Array)中添加新值或者更新了一个输入对象(Object)的属性，Angular都不会调用纯管道。
非纯管道：

这样就是非纯管道；
区别就是你随便改动一个，angular都会检测更新；