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中引入，如下圖

如果是子組件中使用，需在父組件中引入子組件才可使用