有角度日期前管道吗？

Question

我正在尝试创建帖子共享网站。我想以角度创建日期前管道。

    import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
  name: 'messageTime',
  pure: false
})
export class MessageTimePipe implements PipeTransform {
  transform(value: Date, []): string {
    var result: string;

    // current time
    let now = new Date().getTime();

    // time since message was sent in seconds
    let delta = (now - value.getTime()) / 1000;

    // format string
    if (delta < 10) {
      result = 'jetzt';
    } else if (delta < 60) { // sent in last minute
      result = 'vor ' + Math.floor(delta) + ' Sekunden';
    } else if (delta < 3600) { // sent in last hour
      result = 'vor ' + Math.floor(delta / 60) + ' Minuten';
    } else if (delta < 86400) { // sent on last day
      result = 'vor ' + Math.floor(delta / 3600) + ' Stunden';
    } else { // sent more than one day ago
      result = 'vor ' + Math.floor(delta / 86400) + ' Tagen';
    }

    return result;
  }enter code here
}

我在我的项目中尝试使用上面的代码。但它不能正常工作。

Answer 1

首先创建管道类

ng g p pipes/DateAgo

让我们添加这些代码，

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

@Pipe({
    name: 'dateAgo',
    pure: true
})
export class DateAgoPipe implements PipeTransform {

    transform(value: any, args?: any): any {
        if (value) {
            const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
            if (seconds < 29) // less than 30 seconds ago will show as 'Just now'
                return 'Just now';
            const intervals: { [key: string]: number } = {
                'year': 31536000,
                'month': 2592000,
                'week': 604800,
                'day': 86400,
                'hour': 3600,
                'minute': 60,
                'second': 1
            };
            let counter;
            for (const i in intervals) {
                counter = Math.floor(seconds / intervals[i]);
                if (counter > 0)
                    if (counter === 1) {
                        return counter + ' ' + i + ' ago'; // singular (1 day ago)
                    } else {
                        return counter + ' ' + i + 's ago'; // plural (2 days ago)
                    }
            }
        }
        return value;
    }

}

Answer 2

我认为最好使用以下软件包之一来获取之前的功能，而不是创建自己的功能，原因如下：

quick implementation

/

maintenance

/

new features and fixes

/

etc

• ngx-timeago（将是我的选择）

  这个具有另一个没有的功能，例如i18n、对前段时间文本的实时更改等

• 以前的管道

  这是一个简单的“仅管道”封装，因此重量轻且易于使用。

• ngx-时刻

  建议：仅当您已经在应用程序中使用 moment.js 时才使用此项目，因为这即将成为一个遗留项目，并且它将给您的包大小增加很多重量（请参阅下面的评论，感谢 @ymerej 和 @亚历山大·热尔曼）。

• Angular 国际

  这是一个新的，看起来也很不错，它得到了 i18n 支持，并且还可以选择更改之前的描述。

Answer 3

更好地使用

moment

来创建

pipe

。经过大量的发现和研究，我得到了这个。

创建管道

ng g pipe pipes/timeAgo

编写这段代码。其实一行你必须改变，其他的会自动生成

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

@Pipe({
  name: 'timeAgo'
})
export class TimeAgoPipe implements PipeTransform {

  transform(value: Date, ...args: unknown[]): unknown {
    return moment(value).fromNow(); // this line you have to edit
  }

}

<span class="timeago-label">{{'2023-07-10T06:00:00Z' | timeAgo}}</span>

您需要安装 moment

npm i moment --save

Answer 4

使用以下命令创建管道：“ng g p customePipe/timeAgo”

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

@Pipe({
  name: 'timeAgo'
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: string): string {
    const time = new Date(value);
    const now = new Date();
    const seconds = Math.floor((now.getTime() - time.getTime()) / 1000);

    if (seconds < 60) {
      return 'just now';
    } else if (seconds < 120) {
      return 'a minute ago';
    } else if (seconds < 3600) {
      return Math.floor(seconds / 60) + ' minutes ago';
    } else if (seconds < 7200) {
      return 'an hour ago';
    } else if (seconds < 86400) {
      return Math.floor(seconds / 3600) + ' hours ago';
    } else {
      return time.toLocaleString();
    }
  }
}