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

自此,大功告成!!!


相关文章
|
10月前
|
JavaScript
fs模块的简单使用
fs模块的简单使用
|
2月前
|
Perl
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
|
2月前
|
应用服务中间件 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修改为相对路径./
|
2月前
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
报错You may use special comments to disable some warnings.vue-cli脚手架关闭eslint的步骤
|
安全 网络协议 JavaScript
Open-Dis的C++版本编译(CMake-gpu 3.21.4)以及SDL2和SDL_net库的配置使用
Open-Dis的C++版本编译(CMake-gpu 3.21.4)以及SDL2和SDL_net库的配置使用
164 0
Open-Dis的C++版本编译(CMake-gpu 3.21.4)以及SDL2和SDL_net库的配置使用
|
JavaScript
nodejs fs模块的使用
nodejs fs模块的使用
52 0
nodejs fs模块的使用
|
安全 测试技术 数据安全/隐私保护
在使用Note.js的过程中对于tty对于终端的运用、加密模块以及Assert的事件驱动程序的深入运用理解
在使用Note.js的过程中对于tty对于终端的运用、加密模块以及Assert的事件驱动程序的深入运用理解
在使用Note.js的过程中对于tty对于终端的运用、加密模块以及Assert的事件驱动程序的深入运用理解
|
Perl
Angular最新教程-第十三节 管道Pipes 自定义管道
Angular最新教程-第十三节 管道Pipes 自定义管道
123 0
Angular最新教程-第十三节 管道Pipes 自定义管道
|
JavaScript 前端开发
Node.js:fs文件模块的替代品fs-extra
Node.js:fs文件模块的替代品fs-extra
193 0
|
JavaScript
Nodejs中process.cwd()与__dirname的区别
首先,上官方解释。 => process.cwd(): The process.cwd() method returns the current working directory of theNode.js process. 上面的意思就是,process.cwd()返回的是当前Node.js进程执行时的工作目录。
3959 0