如何像Youtube那样在Angular 8中显示时间

我正在编写一个Angular应用程序，使用API中的数据克隆一些YouTube功能

该应用程序从API获取视频时间戳作为字符串

每个时间戳都有以下格式：

YYYY-MM-DDTHH:MM:SS

一个例子是：

2021-04-28 13:18:20.13

我希望在文本或卡片视图中显示为：

1 hour
1 hours ago
4 weeks ago
11 months ago
1 year ago
...

我如何在不使用库的情况下实现这一点

// create a date from string:
const date = new Date('2021-04-28T13:18:20.13')

// create date for now:
const today = new Date();

// then calculate the difference:
const difference = today.getTime() - date.getTime();

---

您将获得以毫秒为单位的时差。然后你可以写一个公式来计算从那里开始的年、月、日等。

我通过构建自己的用户友好的日期管道解决了这个问题。使用终端窗口中的命令

ng g p pipes/DateAgo

使用Angular CLI在pipes文件夹中生成自定义日期管道

现在生成文件结构将有两个。如果您不关心测试，请随意删除

date ago.pipe.spec.ts

文件

现在在

date ago.pipe.ts

文件中，编写以下代码

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 = {
                '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;
    }

}

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“dateAgo”，
纯：真的
})
导出类DateAgoPipe实现PipeTransform{
转换（值：any，args？：any）：any{
如果（值）{
常数秒=数学地板（（+新日期（）-+新日期（值））/1000）；
if（seconds<29）//不到30秒前将显示为'Just now'
返回“刚才”；
常数间隔={
“年份”：31536000，
“月”：2592000，
“周”：604800，
“日”：86400，
“小时”：3600，
分钟:60,，
“第二”：1
};
让我们来反击；
用于（以间隔表示的常数i）{
计数器=数学楼层（秒/间隔[i]）；
如果（计数器>0）
如果（计数器==1）{
返回计数器+''+i+'ago'；//单数（1天前）
}否则{
return counter+''+i+'s ago'；//复数（2天前）
}
}
}
返回值；
}
}

最后，不要忘记在

app.modules.ts

文件中导入我们的自定义日期管道，并将其添加到声明中：

[…DateAgoPipe]

数组。（如果未使用Angular CLI生成日期管道，请执行此操作，否则导入应该已经存在，因为Angular CLI为您执行此操作。）

现在，只需将HTML代码从

Published:{{dog.date | date}}

更新为

Published:{{dog.date | dateAgo}

并观看神奇的发生