Angular自定义管道

1、使用ng g pipe pipe/mySex创建了一个名叫mySex的管道文件

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mySex'
})
export class MySexPipe implements PipeTransform {
  //管道内默认的处理函数，在模板中使用默认调用transform函数，传入旧值，return过滤后的值
  transform(value: unknown): unknown {
    if (value==1) {
      return '男'
    }else if (value==2) {
      return '女'
    }else{
      return '太监'
    }
  }

}

2、在页面中使用

// 在页面中使用的是使用管道装饰器声明的管道名
{{'1'|mySex}}//通过管道过滤为男
{{'2'|mySex}}//通过管道过滤为女
{{'3'|mySex}}//通过管道过滤为太监

3、管道定义时也可以传入另外的参数

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mySex'
})
export class MySexPipe implements PipeTransform {
  //管道内默认的处理函数，在模板中使用默认调用transform函数，传入旧值，return过滤后的值
  transform(value: unknown,lang='zh'): unknown {
    if(lang=='zh'){
        if (value==1) {
          return '男'
        }else if (value==2) {
          return '女'
        }else{
          return '太监'
        }
      }
     }else if(lang=='en'){
       //do something    
     }
}
//在模板上调用时使用  
{{'1'|mySex:'en'}}//en为传参