例子: 有个 需要根据时间转换成周几的需求,我们可以用管道过滤自定义pipe实现

1.命令

ionic g pipe pipes/convertWeek

生成下面的2个文件:

ionic4 自定义pipe_自定义

2.书写covert-week.pipe

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

@Pipe({
name: 'convertWeek'
})
export class ConvertWeekPipe implements PipeTransform {

transform(value: any, args?: any): any {
if(!value) return value;
if(typeof value == 'string'){
value = parseInt(value);
}
return "日一二三四五六".charAt(new Date(value).getDay());
}
}

3. 使用

ionic4 自定义pipe_html页面_02

  • 在test.moudle.ts中声明中引入自定义pipe
  • ionic4 自定义pipe_ionic4_03

  • test.page.ts中定义个变量
  • ionic4 自定义pipe_html页面_04

  • html页面中使用
  • ionic4 自定义pipe_ionic4_05

  • 页面效果
  • ionic4 自定义pipe_html页面_06


自此,大功告成!!!