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中引入,如下图

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

angular和ionic4对过滤器pipe的使用的更多相关文章
- Angular.js之内置过滤器学习笔记
		
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
 - Angular核心概念之五---过滤器
		
Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal ...
 - angular中的自定义过滤器
		
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
 - [Angular 2] Understanding Pure & Impure pipe
		
First, how to use a build in pipe: <div class="pipe-example"> <label>Uppercase ...
 - angular中的orderBy过滤器使用
		
一 orderBy过滤器 AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array: 第一种:function,如果是func ...
 - ionic准备之angular基础——格式化数据以及过滤器(8)
		
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
 - [Angular] Increasing Performance by using Pipe
		
For example you make a function to get rating; getRating(score: number): string { let rating: string ...
 - [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
		
Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...
 - Angular JS 学习之过滤器
		
1.过滤器可以使用一个管道字符(|)添加到表达式和指令中: 2.AngularJS过滤器可用于转换数据: **currency:格式化数字为货币格式: **filter:从数组项中选择一个子集: ** ...
 
随机推荐
- php中trait的使用方法
			
1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...
 - ubuntu 16.04无法连接网络;双系统无法上网;连接已断开,你现在处于断开状态
			
先描述一一下我的问题,若和你的一样,请继续往下看. 我是在原有Windows7系统的台式计算机中安装了ubuntu 16.04,所以目前这台计算机是双系统.打开Windows系统时有线网络正常链接.但 ...
 - jQuery 源码分析(十一) 队列模块 Queue详解
			
队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...
 - javascript刷新当前页面的几种方式
			
这里总结一下JavaScript刷新当前页面的几种方式. 1.history对象. history.go(0); 2.location对象. location.reload(); location = ...
 - mosquitto配置文件
			
#配置文件为mosquitto #参见mosquitto.conf(5)了解更多信息. #显示默认值,取消注释以更改. #使用#字符来表示注释,但只有当它是 #第一个字符就行了. #========= ...
 - PDF目录编辑器使用介绍
			
PDF目录编辑器使用介绍 魏刘宏 2019.06.28 PDF 是一个比较优秀的文档格式,能够保证在任何终端显示的样式是一样的.但同时也带来了一个问题,就是编辑不方便,其实这也是这个格式特意为之的,无 ...
 - VS Code 快捷键 && 常用插件
			
常用插件 分类 插件名称 说明 开发 C# C#语言 C# Extensions C#扩展功能(添加类,接口,智能提示) C# XML Documentation Comments 代码添加注释 ...
 - Python安装PyOpenGL
			
1.目前PyOpenGL是用python2写的,如果你使用的是python3需要自己修改PyOpenGL,我这里使用的是python2.7 2.下载PyOpenGLhttps://pypi.org/p ...
 - Vue中计算属性、侦听、过滤、自定义指令、ref的操作
			
1.计算属性 <div id="app"> <input type="text" v-model="x"> < ...
 - call , apply的this指向实现原理并自己实现封装
			
实现this指向原理 var value = 'value' var obj = { value: 'obj' } function func() { console.log(this.value) ...