时间戳

首页 > 解决方案 > Angular：是否可以在 Angular 模板中使用第三方库？

angular - Angular：是否可以在 Angular 模板中使用第三方库？

问题描述

是否可以在组件模板中使用第三方库，而不仅仅是在组件 TS 文件中？

我使用“date-fns”库，我想在模板中使用它来格式化日期。像这样的东西，其中“format”是“date-fns”库中的一个函数。

<span class="cell-time-horizon-value">
    {{format(session?.timeHorizon.start, "yyyy-MM-dd")}}
</span>

标签： angulartypescriptdate-fns

解决方案

最好的方法是使用Pipe：

import { format } from 'date-fns';

@Pipe({
  name: 'formatDate'
})
export class FormatDatePipe implements PipeTransform {
  transform(value: string | number | Date, dateFormat: string): string {
    return format(value, dateFormat);
  }
}

<span class="cell-time-horizon-value">
    {{session?.timeHorizon.start | format:"yyyy-MM-dd")}}
</span>

另一种回答标题中问题的方法是在组件中声明它。因此，如果您有：

<span class="cell-time-horizon-value">
    {{format(session?.timeHorizon.start, "yyyy-MM-dd")}}
</span>

您可以通过更改组件类来完成这项工作：

import { format } from 'date-fns';

export class TestComponent {
  readonly format = format;
}

推荐阅读