angular自定义管道

Posted 2020-11-19 前端路上的小兵

对自定义管道的认识

管道的定义中体现了几个关键点：
　　1、管道是一个带有“管道元数据(pipe metadata)”装饰器的类。
　　2、这个管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。
　　3、当每个输入值被传给transform方法时，还会带上另一个参数，比如我们这个管道中的exponent(放大指数)。
　　4、我们通过@Pipe装饰器告诉Angular：这是一个管道。该装饰器是从Angular的core库中引入的。
　　5、这个@Pipe装饰器允许我们定义管道的名字，这个名字会被用在模板表达式中。它必须是一个有效的javascript标识符。 比如，我们下面这个管道的名字是exponentialStrength。

PipeTransform接口

　　transform方法是管道的基本要素。 PipeTransform接口中定义了它，并用它指导各种工具和编译器。 理论上说，它是可选的。Angular不会管它，而是直接查找并执行transform方法。

自定义管道需要注意

　　我们使用自定义管道的方式和内置管道完全相同。
　　我们必须在AppModule的declarations数组中包含这个管道。
　　我们必须手动注册自定义管道。如果忘了，Angular就会报告一个错误。
　　还需要注意的是，我们使用的时候的管道的名字是自定义管道用@Pipe注解的时候命名的名字。

自定义管道实例

　　以下是我根据自定义管道的知识写的几个实例，有的是参考网上的实例在本地实现可行的代码，也在此提供参考

过滤todo

/*
    管道中纯管道和非纯管道之间的区别关键在于：
        如果是纯管道，他检测的深读很低，比如检测一个对象数组，对象数组中的对象的某个属性发生变化的时候，纯管道是检测不到的，这时候就需要用到非纯管道
*/
import {Pipe, PipeTransform} from ‘@angular/core‘;
/*
 * Example:
 *   todoList | todosStatusPipe:‘done‘:selectFilter
 *   其实这里我们已知一定是根据todo的done属性来过滤，那么实际上是可以将‘done‘这个传值给去了，直接在管道方法中用done来判断，但是
 *   这里主要是为了说明.引出的属性和[]引出的属性是有区别的，[]是可以传入变量来引出属性的
*/
@Pipe({
  name: ‘todosStatusPipe‘,
  pure: false
})
export class TodosStatusPipe implements PipeTransform {
  transform(value: Array<any>, filterString: string, status: string): Array<any> {
    let filterTodoList = [];
    switch(status){
        case ‘all‘:
            filterTodoList = value;
            break;
        case ‘active‘:
            filterTodoList = value.filter(todo => !todo[filterString]);
            break;
        case ‘completed‘:
            filterTodoList = value.filter(todo => todo[filterString]);
            break;
    }
    return filterTodoList;
  }
}

指数倍增管道

/*
    exponential-strength.pipe.ts
    步骤 ：
        1、导入Pipe，PipeTransform
        2、通过注解定义名字，定义是纯管道还是非纯管道，默认是纯管道
        3、定义管道并继承PipeTransform
        4、实现继承的方法transform
*/
import { Pipe, PipeTransform } from ‘@angular/core‘;
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: ‘exponentialStrength‘})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

判断性别管道

import {Pipe, PipeTransform} from ‘@angular/core‘;
@Pipe({
  name: ‘sexReform‘,
  //非纯管道
  //重点在于实现PipeTransform接口的transform方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。
  pure:false
})
export class SexReformPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    let chineseSex;
    switch (value) {
      case ‘male‘:
        chineseSex = ‘男‘;
        break;
      case ‘female‘:
        chineseSex = ‘女‘;
        break;
      default:
        chineseSex = ‘未知性别‘;
        break;
    }
    return chineseSex;
  }
}

原文地址

https://www.jianshu.com/p/5140a91959ca