简介
ng2-currency 是一个基于 Angular 2+ 的插件，它可以轻松地将你的数字转换成符合货币格式的字符串。它支持全球几乎所有的货币类型，并且可以定制符号位置、小数位数和千分位分隔符等。
安装
ng2-currency 可以通过 npm 进行安装，执行以下命令即可：
npm install ng2-currency --save
基本使用
导入模块
首先，你需要在你的 Angular 2+ 项目中导入 ng2-currency 模块。在你的 app.module.ts 文件中加入以下代码：
-- -------------------- ---- -------
------ - ------------------ - ---- ---------------
-----------
-------- -
-- ----
------------------
--
-- ----
--
------ ----- --------- - -使用指令
你现在可以在你的组件中使用 ng2-currency 指令了。最基本的使用方式是将它添加到一个 input 元素中。
<input type="text" [(ngModel)]="money" currencyMask />
上面的代码中，我们向 input 元素添加了一个 [(ngModel)] 双向绑定，它将输入框的值绑定到组件中的 money 变量中。并将 currencyMask 指令添加到该元素中，这将触发 ng2-currency 的转换逻辑。
配置选项
除了基本用法外，ng2-currency 还提供了一些选项，可以帮助你根据自己的需要来定制转换的逻辑。
<input type="text" [options]="{ prefix: '$' }" [(ngModel)]="money" currencyMask />在上面的代码中，我们向 input 元素添加了一个 options 属性，它的值是一个对象。这里我们将 prefix 属性设置为 '$'，这将把美元符号添加到转换后的字符串中。你可以使用这个属性来设置自己喜欢的货币符号。ng2-currency 还有很多其他的选项，你可以在它的文档中找到详情。
使用示例
下面是一个完整的 Angular 2+ 组件，演示了如何使用 ng2-currency 来转换货币格式。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------ ------------ -----------
-----
--------------------
------ ----------- ------------------- ------------ ------- ---- ---------- ---- -------- --- -- ------------ --
------
-----
--------------------
----------------------
------
--
--
------ ----- ------------ -
----- - -----------
-上面的代码中，我们创建了一个 Angular 2+ 组件，里面包含了一个 input 元素和一个 span 元素。我们将 [(ngModel)] 双向绑定到组件中的 money 变量上，这将使得输入框和输出框的值保持同步。我们还使用了 [options] 属性，将货币符号设置为美元符号，千分位分隔符设置为 ','，小数点设置为 '.'。这样就可以轻松地将 1234567.89 转换为 "$1,234,567.89" 了。
总结
ng2-currency 是一个非常方便的 Angular 2+ 插件，它可以帮助我们将数字转换为符合货币格式的字符串。在这篇文章中，我们讲解了如何安装和使用 ng2-currency，并且演示了一个完整的示例。我希望这篇文章对你有所帮助，欢迎你的评论和分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005686f81e8991b448e46c6