管道相關(guān)的資料：https://www.angular.cn/docs/ts/latest/guide/pipes.html

基礎(chǔ)介紹：

管道可以在模板中轉(zhuǎn)換顯示的內(nèi)容米苹。管道把數(shù)據(jù)作為輸入稠诲，然后轉(zhuǎn)換它拢切，給出期望的輸出。
自定義組件如下：

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

@Pipe({
    name: 'numtotimePipe'
})
@Injectable()
export class NumToTimePipe implements PipeTransform {
    /*
     數(shù)字轉(zhuǎn)分鐘
     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;
    }

}

ionic2.2.1中使用：

1.先在app.module.ts中聲明

import {NumToTimePipe} from '../pipes/numtotimePipe';

2.加入app.module.ts文件declarations中

declarations: [
NumToTimePipe,]

3.在需要用到的頁(yè)面

<span class="audio_duration">{{log.trackDetail.voiceRecordSize | numtotimePipe }}</span>

ionic3.4.2中因?yàn)槭褂昧藨屑虞d距糖，所以稍微有些變化

1.每個(gè)頁(yè)面都編程了一個(gè)頁(yè)面，都有自己的module.ts文件
2.寫(xiě)好眾多的pipe管道封裝成了一個(gè)模塊，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 { }

3.在使用到管道的頁(yè)面的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 {}

可以參考本人的guthub項(xiàng)目挥萌，歡迎star

傳送門(mén)：https://github.com/xiedajian/ipvpKmfApp2.0/tree/master/src/pipes