Ionic3多个自定义过滤器--管道（pipe）

往往我们创建自定义管道一般都不止只会创建一个自定义管道，和自定义组件类似，创建多个方式如下。

一、命令行生成管道

ionic g pipe formateDate

ionic g pipemoneyDate

 

生成的文件截图如下

二、全局导入app.module.ts文件并添加到imports配置中

app.module.ts

//导入自定义管道

import {PipesModule} from '../pipes/pipes.module';

imports: [

..

PipesModule,

..]

 

三、修改pipes.module.ts文件

命令行直接生产后的pipes.module.ts文件里面可能没有帮我们在imports数组里面自动添加配置，需要我们手动引入模块并配置

添加BrowserModule 、IonicModule模块

import { BrowserModule } from '@angular/platform-browser';

import { IonicModule} from 'ionic-angular';

//配置imports项

imports: [

BrowserModule,

IonicModule.forRoot(PipesModule

) /*注入IonicModule 注意写法PipesModule为你当前的模块名称*/

    ]

跟添加自定义组件一个道理

四、在需要使用自定义组件的pages下的xx.module.ts文件里面导入

import {PipesModule} from '../../pipes/pipes.module'

imports: [

PipesModule, //添加

IonicPageModule.forChild(UserCarinfoPage)

],

 

五、页面上使用

<div>总计通行费用:￥{{monery | formateMoney}}</div>

<div class="bill-number">{{date | formateDate}}月账单</div>