zoukankan      html  css  js  c++  java
  • angular和ionic4对过滤器pipe的使用

    以下为自定义过滤器

    import { Pipe, PipeTransform, Injectable } from '@angular/core';
    import { DomSanitizer} from '@angular/platform-browser';
    
    @Pipe({
      name: 'weekPipe'
    })
    //数字转中文
    export class WeekPipe implements PipeTransform {
      transform(value: any, args?: any): any {
        switch (parseInt(value)) {
    	      case 1: return '一';
    	      case 2: return '二';
    	      case 3: return '三';
    	      case 4: return '四';
    	      case 5: return '五';
    	      case 6: return '六';
    	      case 7: return '日';
    	      default: 
    	      	break;
    	  }
    
      }
    
    }
    
    @Pipe({ name: 'safe' })
    export class SafePipe implements PipeTransform {
      constructor(private sanitizer: DomSanitizer) {}
      transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
      }
    }
    
    //数字转中文
    @Pipe({
      name: 'type'
    })
    export class TypePipe implements PipeTransform {
      transform(value: any, args?: any): any {
        switch (value) {
    	      case 'P': return '家长';
    	      case 'T': return '老师';
    	      case 'S': return '学生';
    	      case 'P,T': return '家长,老师';
    	      case 'P,S': return '家长,学生';
    	      case 'T,S': return '老师,学生';
    	      case 'T,P': return '老师,家长';
    	      case 'S,T': return '学生,老师';
    	      case 'S,P': return '学生,家长';
    	      case 'P,T,S': return '不限';
    	      case 'P,S,T': return '不限';
    	      case 'T,P,S': return '不限';
    	      case 'T,S,P': return '不限';
    	      case 'S,T,P': return '不限';
    	      case 'S,P,T': return '不限';
    	      case 'SELF': return '本校';
    	      case 'SCHOOL': return '本校';
    	      case 'AREA': return '本区';
    	      case 'CITY': return '本市';
    	      case 'PROVINCE': return '本省';
    	      case 'ALL': return '不限';
    	      default: 
    	      	break;
    	  }
    
      }
    
    }
    

      

    在angular中使用

    在项目文件app.module.ts中引入

    import { WeekPipe,SafePipe,TypePipe } from './common/comm-pipe.pipe'; 

    入以后即可全局使用,如下

    在ionic中使用

    在需要使用的组件中module.ts中引入,如下图

    如果是子组件中使用,需在父组件中引入子组件才可使用

     

  • 相关阅读:
    【批处理】批处理遍历指定文件夹下的文件
    Win10删除文件显示删除确认对话框
    【makefile】make程序的命令行选项和参数
    【批处理】获取当前目录的绝对路径
    Win10怎样显示此电脑
    单片机普通行列矩阵键盘驱动
    ADS1.2与MDK4.7冲突问题的解决方法
    Cortex-M3 咬尾中断 与 晚到中断
    Cortex-M3 SVC与PendSV
    安卓渗透测试工具——Drozer(安装和使用)
  • 原文地址:https://www.cnblogs.com/mary-123/p/11118435.html
Copyright © 2011-2022 走看看