前言
開發(fā)前端頁(yè)面和后端系統(tǒng)都免不了和時(shí)間格式打交道匀油，比如某件貨物的創(chuàng)建時(shí)間，更新時(shí)間勾笆，下架時(shí)間等等等等敌蚜。后端系統(tǒng)通常都是以標(biāo)準(zhǔn)的時(shí)間格式存儲(chǔ)在數(shù)據(jù)庫(kù)中，但是拿給前端頁(yè)面展示的時(shí)候有需要根據(jù)業(yè)務(wù)需要展示成各種各樣的格式窝爪，比如有的地方只需要顯示時(shí)分秒弛车，有的地方只需要顯示年月日，有的地方有需要顯示成距離現(xiàn)在多少小時(shí)以前蒲每。
如果大家仔細(xì)觀察過(guò)微信的朋友圈功能就很容易想明白纷跛，比如你現(xiàn)在發(fā)了一條朋友圈，時(shí)間顯示的是“剛剛”啃勉，過(guò)一個(gè)小時(shí)你再看就是“一小時(shí)前”忽舟，過(guò)一天再看的時(shí)候就是“一天前”，再過(guò)一段時(shí)間看的話就是具體的發(fā)布時(shí)間了，比如“2018-03-27 22:19:00”這樣的一個(gè)格式叮阅。因?yàn)楹蠖舜鎯?chǔ)的數(shù)據(jù)始終是不變了刁品，所以前端對(duì)時(shí)間格式的不斷變化就變的至關(guān)重要。
那么今天我要給大家隆重介紹的就是讓這個(gè)需求變得異常簡(jiǎn)單的一個(gè)插件：
moment浩姥，這是他的官網(wǎng)地址：http://momentjs.cn/挑随。
使用了這個(gè)插件以后可以滿足你對(duì)前端時(shí)間格式處理的一切需求。
下面具體來(lái)講講在Ionic2中怎么使用該插件勒叠。
步驟
1兜挨、在package.json文件中加入相關(guān)插件依賴，加入完記得慣例要npm install一下
"moment": "2.18.1"
2眯分、創(chuàng)建自定義pipe：moment.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import Moment from 'moment'
@Pipe({
name: 'moment',
pure: false,
})
export class MomentPipe implements PipeTransform {
transform(d: Date | Moment.Moment | string, args?: any[]):string {
// utc add 8 hours into beijing
let rv = Moment(d).format(args[0]);
return rv;
}
}
@Pipe({
name: 'timeago',
pure: false,
})
export class TimeagoPipe implements PipeTransform {
transform(d: Date | Moment.Moment | string):string {
// utc add 8 hours into beijing
let rv = Moment(d).fromNow();
return rv;
}
}
3拌汇、將該pipe導(dǎo)入需要使用pipe的模塊
4、html頁(yè)面中使用moment指令
<span >{{ productPrice.createdTime | moment: ['MM-DD HH:mm'] }}</span>
最后
這里只貼出了關(guān)鍵代碼弊决，如果在實(shí)現(xiàn)功能的過(guò)程中還有疑問(wèn)噪舀，可以參考我GitHub上的完整項(xiàng)目代碼：https://github.com/aapple/sm-coal-app
