Ionic2实战-时间转换库moment的使用

前言

开发前端页面和后端系统都免不了和时间格式打交道，比如某件货物的创建时间，更新时间，下架时间等等等等。后端系统通常都是以标准的时间格式存储在数据库中，但是拿给前端页面展示的时候有需要根据业务需要展示成各种各样的格式，比如有的地方只需要显示时分秒，有的地方只需要显示年月日，有的地方有需要显示成距离现在多少小时以前。

如果大家仔细观察过微信的朋友圈功能就很容易想明白，比如你现在发了一条朋友圈，时间显示的是“刚刚”，过一个小时你再看就是“一小时前”，过一天再看的时候就是“一天前”，再过一段时间看的话就是具体的发布时间了，比如“2018-03-27 22:19:00”这样的一个格式。因为后端存储的数据始终是不变了，所以前端对时间格式的不断变化就变的至关重要。

那么今天我要给大家隆重介绍的就是让这个需求变得异常简单的一个插件：
moment，这是他的官网地址：http://momentjs.cn/。

使用了这个插件以后可以满足你对前端时间格式处理的一切需求。

下面具体来讲讲在Ionic2中怎么使用该插件。

步骤

1、在package.json文件中加入相关插件依赖，加入完记得惯例要npm install一下

"moment": "2.18.1"

2、创建自定义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导入需要使用pipe的模块

4、html页面中使用moment指令

{{ productPrice.createdTime | moment: ['MM-DD HH:mm'] }}

最后

这里只贴出了关键代码，如果在实现功能的过程中还有疑问，可以参考我GitHub上的完整项目代码：https://github.com/aapple/sm-coal-app