Angular 2.x折腾记 :(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>
目录
相关文章
|
2月前
在Angular中创建自定义管道
在Angular中创建自定义管道
13 0
|
5月前
|
Perl
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
|
5月前
|
JavaScript 前端开发 API
什么是 Angular 中的 async 管道
什么是 Angular 中的 async 管道
|
Perl
Angular最新教程-第十三节 管道Pipes 自定义管道
Angular最新教程-第十三节 管道Pipes 自定义管道
143 0
Angular最新教程-第十三节 管道Pipes 自定义管道
|
JSON Linux 数据格式
Angular 2.x折腾记 :(5) 动手实现一个自定义管道
管道这东西,可以让用户的体验变得好,也可以省去我们一些重复性的工作; 官方的内置管道就不解释了,自行看文档吧
149 0
|
JSON API 数据格式
【Angular教程】自定义管道
【Angular教程】自定义管道
201 0
【Angular教程】自定义管道
|
JSON 前端开发 JavaScript
Angular最新教程-第十二节 管道Pipes 内置管道
Angular最新教程-第十二节 管道Pipes 内置管道
318 0
|
JavaScript 前端开发
Angular管道PIPE介绍
PIPE,翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器,从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。
193 0
Angular 如何自定义 pipe 管道以及参数传递问题
Angular 如何自定义 pipe 管道以及参数传递问题
363 0
Angular 如何自定义 pipe 管道以及参数传递问题
|
JavaScript
Angular4总结(四)—— 数据绑定,响应式,管道
数据绑定 angular4中默认的数据绑定都是单向的。可分为: 插值表达式形式(Dom属性绑定) <p>{{test}}<p> Dom 属性绑定流程: 控制器中定义了一个属性,值发生了改变 对应的dom的value被附上改变了的值 渲染后的页面上也会出现刚刚的值 这一切操作都和html属性不发生任何关系 html属性绑定,使用中括号 <img [src]="imgUrl"/> //如果没有写这个方括号,angular会把属性右侧的值作为字符串进行赋值,而非表达式 基本Html属性绑定 CSS属性绑定 这种形式是全有或者全无的。
1398 0