Angular 2.x折腾记——打造可靠的时差管道

2023-11-05 03:00:08

前言

在开发中，我们经常需要处理日期和时间。为了简化这一过程，可以使用管道来格式化和转换日期和时间。本文将介绍如何使用Angular构建一个可靠的时差管道，以便更轻松地处理日期和时间。

效果图

之前

2020-09-01 08:21:20

之后

1 天前

前置基础

Angular 2+的基础知识
TypeScript 基础

实现代码

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

@Pipe({
  name: 'longTimeago'
})
export class LongTimeagoPipe implements PipeTransform {

  transform(value: string): string {
    if (!value) {
      return '';
    }
    const date = new Date(value);
    const now = new Date();
    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
    if (seconds < 60) {
      return '刚刚';
    }
    const minutes = Math.floor(seconds / 60);
    if (minutes < 60) {
      return minutes + ' 分钟前';
    }
    const hours = Math.floor(minutes / 60);
    if (hours < 24) {
      return hours + ' 小时前';
    }
    const days = Math.floor(hours / 24);
    if (days < 30) {
      return days + ' 天前';
    }
    const months = Math.floor(days / 30);
    if (months < 12) {
      return months + ' 个月前';
    }
    const years = Math.floor(months / 12);
    return years + ' 年前';
  }
}