Angular 2 输入自定义管道答案

【问题标题】：Angular 2 Input Custom PipeAngular 2 输入自定义管道
【发布时间】：2016-10-02 21:21:43
【问题描述】：

有没有办法在 Angular 2 的输入文本中使用货币或自定义管道？

我试过了：

<input [(ngModel)]="order.price | currency"/>

但没有成功

【问题讨论】：

【解决方案1】：

不能在输入中使用管道，即使在角度 1 中也是如此。

您正在寻找的是一个掩码指令。对于 angular1，有很多指令，如 ngMask、angular-input-masks 等。

Angular2 目前处于候选版本中（06/02/2016），所以只有几个“指令”。

您也可以构建自己的遮罩组件。

【讨论】：

实际上，您可以在输入中使用管道。但是您必须使用两条指令来应用双向数据绑定。 [ngModel]="myModel | myPipe" (ngModelChange)="myModel = $event" 对于简单的操作，它工作正常，但可能会出现一些怪癖。

【解决方案2】：

我已经能够使用angular2-text-mask 和text-mask-addons 来转换输入文本字段值的格式。文档和相关信息非常详尽，可以在text-mask demo page 上查看货币示例。

虽然我没有尝试过，this ngconsultant blog post 讨论了一种使用某种限制（浏览器原生焦点/模糊方法）@HostListener 技术调整输入值的技术。

无论使用哪种方法，您都必须警惕您是否只是为了使 UI 对用户更友好而转换输入，或者您是否只想利用/保留与组件中的数据模型绑定的格式正确的输入。

关于前者，如果您想在输入被使用、存储或传递之前删除应用到输入的格式，则需要在您的组件代码或其他管理服务的服务中进行额外的工作/代码/干预数据模型从输入值绑定的数据中解析格式。

（在this stackoverflow post 中讨论了一个非常基本的解决方案。）

【讨论】：