ionic3.X 自定义pipe

1.在src目录新建pipes文件夹,使用Cli 命令ionic generate pipe mattDamon生成pipe文件

注意:
这里有个坑,自动生成的pipe文件中的@Pipe修饰的name值可能会有"-",ionic对此敏感,要去掉"-",比如我将matt-damon改成了mattDamon

ionic3.X 自定义pipe_第1张图片
Paste_Image.png
2.在pipes文件夹里新建pipes.module.ts文件,将项目中所有的pipe导入(例如下面的MattDamonPipe),代码如下:
import { NgModule } from '@angular/core';
import {MattDamonPipe} from './matt-damon';

@NgModule({
    declarations: [
        MattDamonPipe,
    ],
    imports: [

    ],
    exports: [
        MattDamonPipe,
    ]
})
export class PipesModule { }

这里也可以不要pipes.module.ts文件,直接在app.module.ts里导入

3.使用:在需要使用页面的module.ts文件里导入PipesModule,

比如:

ionic3.X 自定义pipe_第2张图片
Paste_Image.png

然后在页面的html里(注意此pipe的名字必须和你写的pipe文件里的name值一样):

Paste_Image.png
Paste_Image.png

你可能感兴趣的:(ionic3.X 自定义pipe)