RelativeTime 是 DevUI (Angular) 组件库中一个非常实用的日期转换管道（Pipe）。它能够将标准的日期时间字符串，智能地转换为我们日常使用的、易于理解的相对时间表述，如“刚刚”、“2个月前”、“3年后”等，极大地提升了应用的用户体验。

核心功能与价值

该组件的核心价值在于其**“人性化”**的转换逻辑。它自动判断给定时间与当前时间（或您指定的时间）的跨度，并选择最合适的口语化单位进行展示，避免了用户手动计算时间差的麻烦。

根据官方文档，其主要功能包括：

• 智能相对时间转换：自动输出如“刚刚”、“X分钟前/后”、“昨天”、“X年前/后”等格式。
• 自定义比较基准：不仅可以与“现在”比较，还能与任何一个指定的历史或未来时间点进行比较。
• 可配置的格式化阈值：通过参数控制，当时间间隔超过一定范围时，可以回退到显示完整的标准日期格式。

使用方法

1. 基本使用（与当前时间比较）

这是最常见的场景。在模板中，您可以直接对日期数据使用 dRelativeTime 管道。

<!-- 在您的组件模板中 -->
<p>发布时间：{{ yourDateObject | dRelativeTime | async }}</p>

关键说明：

• async 管道：因为 dRelativeTime 是一个异步管道（处理时区和国际化可能涉及异步操作），所以在使用时必须与 Angular 的 async 管道联用。
• 输入格式：yourDateObject 可以是 Date 对象、数字时间戳或 ISO 8601 日期字符串（如 2025-12-11T00:59:21Z）。

转换效果示例（假设当前时间为 2025-12-11 01:00:00）：

原始时间 (before)	转换结果 (after translate)
2025-12-11 00:58:51	刚刚
2025-12-11 00:30:00	30分钟前
2025-12-10 12:00:00	昨天
2025-12-15 00:59:21	4天后
2026-02-11 00:59:21	2个月后
2023-12-11 00:59:21	2年前

2. 自定义比较时间

如果您需要计算相对于某个特定时间点（而非现在）的相对时间，可以传入第二个参数 compareTime。

<p>计划时间：{{ targetDate | dRelativeTime: limit: customCompareDate | async }}</p>

在您的组件类（.ts文件）中，需要定义用于比较的日期：

export class YourComponent {
  // 要转换的目标日期
  targetDate: Date = new Date('2015-06-20T12:00:00Z');
  
  // 自定义的比较基准时间
  customCompareDate: Date = new Date('2015-05-20T12:00:00Z');
  
  // 可选的限制参数（见下文）
  limit: number = 10;
}

转换效果示例（以 customCompareDate 为 ‘2015-05-20 12:00:00’ 基准）：

原始时间 (before)	转换结果 (after translate)
2015-05-20 12:00:30	稍后
2015-05-20 12:18:00	18分钟后
2015-05-19 12:00:00	昨天
2015-06-20 12:00:00	下个月
2014-05-20 12:00:00	去年

3. 参数详解：limit

第一个可选参数 limit 用于控制显示完整日期的阈值。

• 作用：当目标日期与比较日期之间的年份差的绝对值大于或等于 limit 值时，管道将不再返回“X年前/后”的相对表述，而是直接返回该日期的完整字符串（调用 Date.prototype.toString() 的结果）。
• 默认值：通常为 0，意味着默认不启用此阈值限制，总是显示相对时间。
• 示例：如上表最后一行所示，当 limit 设置为 10，而目标日期 2011-05-20 与比较日期 2015-05-20 相差4年（<10），所以仍然显示相对时间“4年前”。如果相差超过10年，则会显示完整的日期字符串 Fri May 20 2011 12:00:00 GMT+0000 (GMT)。

完整代码示例

以下是一个整合了上述功能的 Angular 组件示例：

// your-component.component.ts
import { Component } from '@angular/core';
import { RelativeTimeModule } from 'ng-devui/relative-time';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent {
  // 示例数据 - 用于与‘当前时间’比较
  datesForCurrent = [
    new Date('2025-12-11T00:58:51Z'), // 刚刚
    new Date('2025-12-11T01:42:21Z'), // 42分钟后
    new Date('2025-12-15T00:59:21Z'), // 4天后
    new Date('2023-12-11T00:59:21Z'), // 2年前
  ];
  
  // 示例数据与自定义比较基准
  datesForCustom = [
    new Date('2015-05-20T12:00:30Z'),
    new Date('2015-05-20T12:18:00Z'),
    new Date('2015-05-19T12:00:00Z'),
    new Date('2015-06-20T12:00:00Z'),
  ];
  customCompareDate: Date = new Date('2015-05-20T12:00:00Z');
  
  // 设置阈值
  yearLimit: number = 5;
  
  getStringName(date: Date): string {
    return date.toUTCString();
  }
}

<!-- your-component.component.html -->
<h3>相对于当前时间</h3>
<table>
  <tr *ngFor="let date of datesForCurrent">
    <td>{{ getStringName(date) }}</td>
    <td>{{ date | dRelativeTime | async }}</td>
  </tr>
</table>

<h3>相对于自定义时间 (2015-05-20 12:00:00)</h3>
<table>
  <tr *ngFor="let date of datesForCustom">
    <td>{{ getStringName(date) }}</td>
    <!-- 传入limit和比较时间 -->
    <td>{{ date | dRelativeTime: yearLimit : customCompareDate | async }}</td>
  </tr>
</table>

使用场景与最佳实践

1. 社交动态与评论：显示“刚刚发布”、“1小时前”、“昨天”等，是最经典的应用场景。
2. 任务与计划管理：显示“距离截止还有3天”、“已逾期2周”，结合自定义比较时间功能非常有用。
3. 系统日志与通知：展示事件发生的相对时间，让用户快速感知时间线。
4. 重要提示：由于该管道返回的是纯文本，其显示格式（如“年”、“月”、“前”、“后”等词语）由组件库内置的国际化（i18n）文件决定。如果您的应用需要多语言支持，请确保正确配置了DevUI的国际化。

总之，DevUI的 RelativeTime 组件通过简洁的管道式API，将复杂的日期计算与本地化表达封装起来，是构建现代化、友好型Angular应用不可或缺的工具之一。

参考资料：

MateChat：https://gitcode.com/DevCloudFE/MateChat

MateChat官网：https://matechat.gitcode.com

DevUI官网：https://devui.design/home