Angular自定义管道pipes过滤器

一、状态类型转对象的特定值

1、自定义管道过滤器StatusFilterPipe.ts

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

export class PipeVo {
  value: string;
  label: string;
}

@Pipe({
  name: 'statusFilter',
  pure: false
})
export class StatusFilterPipe implements PipeTransform {
  transform(items: string, filter: PipeVo[]): any {
    if ((items !== '0' && !items) || !filter) {
      return items;
    }
    for (const one of filter){
      if (items === one.value || one.value.toString() === items.toString()){
        return one.label;
      }
    }
    return '未知';
  }
}

2、在shared.module.ts中将编写的过滤器共享出去

const DIRECTIVES = [
  StatusFilterPipe,
  ReplaceFilterPipe,
  DebounceInputDirective  // input防抖
];
@NgModule({
    declarations: [
            // your components
            ...COMPONENTS,
            ...DIRECTIVES,
            ...WIDGETS
        ],
})

3、使用

<sv label="操作记录" col="2">{{selectedLog.operatorType | statusFilter: dic_sys_log_type_operator_options}}</sv>

说明：

dic_sys_log_type_operator_options的内容：

[{value:'A', label:'张三'},{value:'B', label:'李四'},{value:'C', label:'王五'}]

当selectedLog.operatorType的值为 A、B、C则分别显示'张三'、'李四'、'王五'

二、对字符串中的进行替换

1、自定义管道过滤器ReplaceFilterPipe.ts

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

@Pipe({
  name: 'replaceFilter',
  pure: false
})
export class ReplaceFilterPipe implements PipeTransform {
  transform(items: string, ...args: any[]): any {
    if (!items){
      return ;
    }
    // return;
    let str = items;
    for (const arg of args){
      str = str.replace(new RegExp(arg, 'gm'), '');
    }
    return str;
  }
}

2、在shared.module.ts中将编写的过滤器共享出去

const DIRECTIVES = [
  StatusFilterPipe,
  ReplaceFilterPipe,
  DebounceInputDirective  // input防抖
];
@NgModule({
    declarations: [
            // your components
            ...COMPONENTS,
            ...DIRECTIVES,
            ...WIDGETS
        ],
})

3、使用

<sv label="请求参数" col="1">{{selectedLog.params | replaceFilter: '%5B':'%5D'}}</sv>

将selectedLog.params中的'%5B':'%5D'替换成''

个人博客 蜗牛