ionic4 自定义pipe

简介: ionic4 自定义pipe

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


1.命令


ionic g pipe pipes/convertWeek


生成下面的2个文件:

1dc618a0ed9580ce8bfa6facb208c08f.png


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. 使用


5d4c6812c8535adbb050f4ddf2e1bce8.png

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

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

test.page.ts中定义个变量

66ba272a0bfc97be54a5fa679e3d5482.png

html页面中使用

88b9988b40447cb37c7e3c492d49867f.png

页面效果

80308c27701d3aead18db6c7b167f308.png

自此,大功告成!!!


相关文章
|
算法 Java 开发工具
Magisk模块:Audio HeadQuarter(使用前仔细阅读)
Magisk模块:Audio HeadQuarter(使用前仔细阅读)
869 0
|
7月前
|
Perl
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
|
7月前
|
JavaScript 前端开发
CMD和UMD,ES Module的差别
CMD和UMD,ES Module的差别
|
7月前
|
应用服务中间件 nginx
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
|
安全 网络协议 JavaScript
Open-Dis的C++版本编译(CMake-gpu 3.21.4)以及SDL2和SDL_net库的配置使用
Open-Dis的C++版本编译(CMake-gpu 3.21.4)以及SDL2和SDL_net库的配置使用
368 0
Open-Dis的C++版本编译(CMake-gpu 3.21.4)以及SDL2和SDL_net库的配置使用
|
JavaScript
nodejs fs模块的使用
nodejs fs模块的使用
71 0
nodejs fs模块的使用
ionic4 pipe.ts is part of the declarations of 2 modules:
ionic4 pipe.ts is part of the declarations of 2 modules:
162 0
ionic4 pipe.ts is part of the declarations of 2 modules:
|
Windows
Inno Setup 插件 CallbackCtrl V1.1 (回调函数插件)
原文 http://restools.hanzify.org/article.asp?id=101 VC 重现 InnoCallback 的功能。Version 1.1修正在某些 Windows 平台(例如: Windows XP SP3)出现不能正常运行的问题。
1511 0
|
JavaScript 前端开发
Node.js:fs文件模块的替代品fs-extra
Node.js:fs文件模块的替代品fs-extra
255 0
|
JavaScript 前端开发 Java
碰到Cannot find module了吗? 来看看require函数与NodeJS模块加载
目录 下面谈谈require函数 先搞清楚是什么 require能用来干什么? 非内置的模块,也想用require来加载怎么做? require函数加载原理 那么在npm registry上的库,怎么进行加载? 好了,前面提了几个围绕了是否重新开一个NodeREPL终端来require JS库的问题 解答”Cannot find module"问题 解答是否需要重启Node REPL 或者修改代码是否需要重启正在的NodeJS进程的问题 解答为何npm install lodash之后为何能够直接在node终端直接require 构建代码共享,开源文化 总结
1154 0
碰到Cannot find module了吗? 来看看require函数与NodeJS模块加载