在这篇文章中，我们将看看如何在没有任何第三方库的情况下用Angular格式化数据的几个选项。

选项1:管道

管道可用于格式化日期、货币、百分比等数据。它们用于HTML模板中。

这是一个简单的例子，我格式化一个日期。在我的组件类中，我有:

导出类AppComponent {now = new Date();
｝

然后在我的模板中，我会使用:

{{now | date}}

上面的代码将应用日期在本例中，管道指向输入日期现在．在这个特定的例子中，Angular会使用它的默认日期格式来返回格式化的日期。这是您可以通过使用其中之一来完全定制的可用的格式化选项．

这里我只显示4位数的年份，例如:

{{now |日期:“yyyy”}}

以下是呈现原始日期和管道格式日期的区别:

Angular框架有很多不同的管道可以使用。的完整的名单可以在这里找到．

选项#2:函数

如果需要，你也可以在Typescript代码中使用函数来格式化数据，而不是在模板中使用管道。

使用这些函数只是将它们导入的问题@angular /常见用适当的参数调用它们。例如:

import {formatDate} from '@angular /常见”;@ component({
/ /……
})
导出类AppComponent {now = new Date();
nowFormatted:字符串;构造函数(){
这一点。现在Formatted =formatDate(这一点。现在,“yyyy”,'en-US');
｝
｝

这些函数的特征与管道使用的参数非常相似:

如果我们仔细观察一下，就会发现管道和这些函数之间的相似之处:Angular管道确实在使用这些函数来格式化数据:https://github.com/angular/angular/blob/8.2.14/packages/common/src/pipes/number_pipe.ts#L13-L81

另一个有趣的地方是，大多数这些函数都需要locale作为参数，以便了解如何基于位置格式化数据。

你可以像我前面所做的那样传递那个地区(“en-US”代表美国的英语语言)，或者你可以注入你的应用程序使用的地区，这是一个最佳实践:

导入{组件，注入,LOCALE_ID} from '@angular/core';
import {formatDate} from '@angular /常见”;@ component({
/ /……
})
导出类AppComponent {
/ /……构造函数(@ inject (LOCALE_ID)地区:字符串){
这一点。现在Formatted = formatDate(this.now, 'yyyy',语言环境）；
｝
｝

中，您可以找到使用管道和格式化函数的并排比较以及更多示例后Stackblitz：

我叫betway必威滚球．我是谷歌的Angular开发专家，也是在角训练在那里我帮助开发团队学习并熟练使用Angular。

需要Angular的帮助吗?我们约个时间谈谈吧．我提供指导和现场培训。

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。