往往我们创建自定义管道一般都不止只会创建一个自定义管道,和自定义组件类似,创建多个方式如下。
一、命令行生成管道
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>