pipes的使用

发布时间 2018-5-23 16:01:22 浏览量() 收藏(1)

我们以moment的使用

插件地址：https://www.npmjs.com/package/moment

一、基础介绍：

管道可以在模板中转换显示的内容。管道把数据作为输入，然后转换它，给出期望的输出。
自定义组件如下

import {Injectable, Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'numtotimePipe'
})
@Injectable()
export class NumToTimePipe implements PipeTransform {
    /*
     数字转分钟
     70  => 01:10"
     */
    transform(second:number):any {
        var mm:number = Math.floor(second / 60);
        var ss:number = Math.ceil(second % 60);
        let minute:string = mm < 10 ? ('0' + mm.toString()) : mm.toString();
        let seconds:string = ss < 10 ? ('0' + ss.toString()) : ss.toString();
        let r:string = minute + ":" + seconds + '"';
        return r;
    }

}

使用了懒加载，所以稍微有些变化

1.每个页面都编程了一个页面，都有自己的module.ts文件

2.写好众多的pipe管道封装成了一个模块，pipes.module.ts

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";
import { ContactTypePipe } from './contactTypePipe';
import { notContactReasonPipe } from './notContactReasonPipe';
import { NumToTimePipe } from './numtotimePipe';
import { TrackResultPipe } from './trackResultPipe';
import { DataSubstringPipe } from './dataSubstringPipe';

@NgModule({
    declarations: [
        ContactTypePipe,
        notContactReasonPipe,
        NumToTimePipe,
        TrackResultPipe,
        DataSubstringPipe,
    ],
    imports: [
        CommonModule
    ],
    exports: [
        ContactTypePipe,
        notContactReasonPipe,
        NumToTimePipe,
        TrackResultPipe,
        DataSubstringPipe,
    ]
})
export class PipesModule { }

在使用到管道的页面的module中

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TrackingLogPage } from './tracking-log';
import { PipesModule } from '../../../pipes/pipes.module';
// import { notContactReasonPipe } from '../../../pipes/notContactReasonPipe';
// import { NumToTimePipe } from '../../../pipes/numtotimePipe';
// import { TrackResultPipe } from '../../../pipes/trackResultPipe';
// import { DataSubstringPipe } from '../../../pipes/dataSubstringPipe';
@NgModule({
  declarations: [
    TrackingLogPage,
    // TrackResultPipe,
    // notContactReasonPipe,
    // NumToTimePipe,
    // DataSubstringPipe,
  ],
  imports: [
    PipesModule,
    IonicPageModule.forChild(TrackingLogPage),
  ],
  exports: [
    TrackingLogPage
  ]
})
export class TrackingLogPageModule {}

二、实例

根据官方文档安装moment:

npm i moment --save

安装完成后可以在pakage.json中看到我们安装的moment的包。

接下来我们要定义一个pipe做全局的转换。

pipe:像一个管子一样将你定义的方法【流到】你需要的地方去。

ionic g pipe relativetime

创建好之后我们在项目中找到pipes/relativetime/relativetime.ts这个文件

引入moment组件

import * as moment from 'moment'

在app.modules.ts中引入并在declarations中声明

import { RelativetimePipe } from "../pipes/relativetime/relativetime"

广告会让浏览体验不好，可这是网站的唯一收入，请点击下面的百度广告，支持老高的开源行动吧！