Angular显示时间过去 - Javascript

在许多Web应用程序中，我们需要显示与当前日期和时间相关的信息。然而，为了使界面更加友好，我们通常喜欢使用"几秒前"、"昨天"、"几小时前"之类的格式来表示时间。在Angular中，我们可以使用一些内置的过滤器来实现这些效果。让我们在本文中来了解如何使用Angular来显示时间过去。

使用Angular的过滤器来显示时间过去

Angular提供了一些内置的过滤器，如date、number、uppercase、lowercase等等。其中，date过滤器可以让我们很容易地将日期格式化为指定的字符串。例如，我们可以使用以下代码来格式化当前日期和时间：

{{ currentDate | date:'yyyy-MM-dd HH:mm:ss' }}

这将显示当前日期和时间的字符串表示形式，如"2022-07-12 19:25:45"。

另一个有用的过滤器是dateago，它可以将给定的日期与当前日期比较，并返回字符串格式的时间差。例如，我们可以使用以下代码来显示一个评论是几分钟/小时/天/月前发布的：

{{ comment.createdAt | dateago }}

当评论发布时间离现在不到一分钟时，我们将看到"刚刚"；如果评论发布时间是在一分钟到一小时之间，将会显示"X分钟前"；如果评论发布时间是在一小时到一天之间，将会显示"X小时前"；如果评论发布时间是在一天到一个月之间，我们将看到"X天前"；如果评论发布时间是在一个月以上，将会显示"X个月前"。

自定义Angular过滤器来显示时间过去

我们也可以自定义Angular过滤器来显示时间差。这很有用，因为它可以让我们按照自己的方式来显示时间过去。让我们看看如何编写一个自定义的Angular过滤器来显示时间差。

首先，我们需要定义一个过滤器函数：

app.filter('timeAgo', function() {
    return function(date) {
        var now = new Date();
        var diff = (now.getTime() - date.getTime()) / 1000;
        var day_diff = Math.floor(diff / 86400);

        if (isNaN(day_diff) || day_diff < 0) {
            return '';
        }

        if (day_diff >= 31) {
            return Math.ceil(day_diff / 31) + '个月前';
        }
        if (day_diff >= 1) {
            return day_diff + '天前';
        }
        var hour_diff = Math.floor(diff / 3600);
        if (hour_diff >= 1) {
            return hour_diff + '小时前';
        }
        var min_diff = Math.floor(diff / 60);
        if (min_diff >= 1) {
            return min_diff + '分钟前';
        }
        return '刚刚';
    };
});

这个过滤器函数将接受一个日期参数，并根据当前日期和时间来计算时间差。最后，它将返回一个字符串表示形式，表示时间差。

接下来，我们可以在HTML代码中使用这个自定义过滤器：

{{ comment.createdAt | timeAgo }}

这将会显示一个评论是几分钟/小时/天/月前发布的。

结论

本文介绍了Angular如何使用内置的过滤器和自定义的过滤器来显示时间过去。使用这些技术，我们可以让界面更加友好，同时也方便用户了解与当前日期和时间有关的信息。让我们通过继续学习Angular的知识，并将它们应用到我们的Web应用程序中来提高用户体验。