Angular 6 + 折腾记 :(11) 写一个挺不靠谱的多少秒/分/时/天前的管道

前言

在写东西的时候发现需要这么一个东西,

而也找不到有人写这个东东,那就自己写一个吧


效果图

  • 之前
  • 用了管道之后

前置基础

  • ng2+的基础知识
  • typescript基础

实现代码及用法

实现代码

  • LongTimeago.pipe.ts
import { Pipe, PipeTransform } from "@angular/core";

function timeago(differtime: number, args: number = 5): string {
  const currentYear: number = new Date().getFullYear(); // 获取当前的年份

  // 不靠谱的时间戳映射
  const TimetoSecond: any = {
    year: new Date(`${currentYear}`).getTime() / 1000,
    month: 30 * 86400,
    day: 86400,
    hour: 3600,
    minute: 60,
  };

  if (differtime >= TimetoSecond.year) {
    return parseInt(`${differtime / TimetoSecond.year}`, 10) + "年前";
  }
  if (differtime >= TimetoSecond.month) {
    return parseInt(`${differtime / TimetoSecond.month}`, 10) + "月前";
  }
  if (differtime >= TimetoSecond.day) {
    return parseInt(`${differtime / TimetoSecond.day}`, 10) + "天前";
  }
  if (differtime >= TimetoSecond.hour) {
    return parseInt(`${differtime / TimetoSecond.hour}`, 10) + "小时前";
  }
  if (differtime >= TimetoSecond.minute) {
    return parseInt(`${differtime / TimetoSecond.minute}`, 10) + "分钟前";
  }
  if (differtime < args) {
    return "片刻之前";
  } else {
    return parseInt(`${differtime}`, 10) + "秒前";
  }
}

@Pipe({
  name: "longtimeago",
})
export class LongTimeagoPipe implements PipeTransform {
  /**
   *
   * @param value 可以处理的值是字符串(能转为数字的)或者数字
   * @param args  传入默认多少之后才进行处理,在此之前都是片刻
   */
  transform(value: string | number, args?: any): any {
    // 获取今天的时间戳,并得到秒数
    const currentTimeStamp: number = new Date().getTime();
    if (value) {
      let paramTimestamp: number = 0; //传入的时间戳
      if (typeof value === "string") {
        paramTimestamp = new Date(`${value}`).getTime();
        if (Number.isNaN(paramTimestamp)) return null;
      }
      if (typeof value === "number") {
        paramTimestamp = new Date(value).getTime();
      }
      const DifferTime = (new Date().getTime() - paramTimestamp) / 1000;
      return timeago(DifferTime, args);
    } else {
      // 否则则返回原值
      return null;
    }
  }
}


用法

在对应的modules引入即可,比如你在app.modules.ts

  • app.module.ts
import { LongTimeagoPipe } from '../pipe/LongTimeago.pipe';




// 这里省略了其他,为了更好的展示 , 在declarations引入即可在模块下的组件使用
@NgModule({
  declarations: [
    LongTimeagoPipe
  ],
  imports: [
  ],
  providers: [],
  bootstrap: [AppComponent],
})


  • app.component.html , | 之后就是管道
  <div class="last-reply-area">
        <span>最后回复于:</span>
        <span>{{listitem.last_reply_at |longtimeago}}</span>
      </div>

总结

有不对之处尽请留言,会及时修正,谢谢阅读

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

C++为什么要引入异常处理机制

在程序设计中,错误时不可避免的。及时有效的发现错误,并作出适当的处理,无论是在软件的开发阶段还是在维护阶段都是至关重要的。错误修复技术是提高代码健壮性的最有效的...

931
来自专栏chafezhou

小说python3的f_strings格式化字符串

1344
来自专栏王清培的专栏

Redis 数据结构与内存管理策略(上)

Redis 数据结构与内存管理策略(上) 标签: Redis Redis数据结构 Redis内存管理策略 Redis数据类型 Redis类型映射 作者:王清培(...

3377
来自专栏C/C++基础

C++异常处理的开销

C++异常是C++有别于C的一大特性 ,异常处理机制给开发人员处理程序中可能出现的意外错误带来了极大的方便,但为了实现异常,编译器会引入额外的数据结构与处理机制...

942
来自专栏资深Tester

测试流程之如何设计测试用例

2043
来自专栏java一日一条

Java 异常处理的误区和经验总结

本文着重介绍了 Java 异常选择和使用中的一些误区,希望各位读者能够熟练掌握异常处理的一些注意点和原则,注意总结和归纳。只有处理好了异常,才能提升开发人员的基...

1071
来自专栏Golang语言社区

【翻译】为什么 goroutine 的栈内存无穷大?

一些 Go 语言的新学习者总是会对 goroutine 栈内存占用大小感到非常好奇。这一般是由于程序员进行无限的函数循环调用导致的。为了说明这个问题,请思考以下...

3626
来自专栏Python入门

你还在为Python中文乱码而感到烦恼?今天老司机给你讲讲!

有没有遇到过这样的问题,读取文件被提示“UnicodeDecodeError”、爬取网页得到一堆乱码,其实这些都是编码惹的祸,如果不能真正理解编码的问题所在,就...

1883
来自专栏葡萄城控件技术团队

C# 8.0的三个值得关注的新特性

image.png C# 语言是在2000发布的,至今已正式发布了7个版本,每个版本都包含了许多令人兴奋的新特性和功能更新。同时,C# 每个版本的发布都与同...

2678
来自专栏葡萄城控件技术团队

C# 8.0的三个值得关注的新特性

1353

扫码关注云+社区

领取腾讯云代金券