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>