zoukankan      html  css  js  c++  java
  • Ionic3多个自定义过滤器--管道(pipe)

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

    一、命令行生成管道

    ionic g pipe formateDate
    
    ionic g pipemoneyDate

    生成的文件截图如下

    wpsCB52.tmp

    二、全局导入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>
    

      

  • 相关阅读:
    php公立转农历
    php判断客户端浏览器类型
    php为图片添加水印
    php类精确验证身份证号码
    webpack脚手架搭建(简单版)
    《深入浅出Node.js》第4章 异步编程
    js 实现继承相关
    设计模式:观察者模式
    bind 方法实现
    用 CSS 实现字符串截断
  • 原文地址:https://www.cnblogs.com/ruoqiang/p/9073235.html
Copyright © 2011-2022 走看看