Angular：指令与管道答案

【问题标题】：Angular: Directives vs PipesAngular：指令与管道
【发布时间】：2017-06-17 10:10:46
【问题描述】：

创建和使用指令与创建和使用管道的论据是什么。

这个问题源于的场景是围绕货币输入和输出。

如果用户需要输入货币，为什么不创建/使用将输入解析为格式化货币字符串的指令？另一种选择是接收该字符串，并通过管道显示它，如下所示：

<input type="text" #val (keydown)="currencyVal=val.value" />
<h3>{{currencyVal | currency}}</h3>

// Where mask-money is a directive that filters the 
//input to a formatted currency string
<input type ="text" mask-money (keydown)="currencyVal=val.value" />
<h3>{{currencyVal}}</h3>

另一方面，可以在由输入触发的控制器/组件中使用管道来过滤值。

我可以问很多关于它的问题，但我基本上想知道：每个问题的论点是什么？

【问题讨论】：

我会说“Angular 方式”是使用管道。管道用于格式化数据，指令用于改变元素的行为/外观。就您而言，您显然想要前者。我不知道你是否会得到很多“每个案例的论据”，因为这似乎是一个小问题。此外，S.O.不鼓励发表意见。

标签： javascript html angular

【解决方案1】：

用最简单的术语来说，我会说管道是操纵数据，而指令是DOM 操作 的更多内容。

管道获取数据作为输入，对其进行转换并以另一种方式输出此数据。

指令获取它“附加”到的 DOM 元素，并通过某种特性对其进行增强。

当然，您会发现两者都有意义的示例（考虑到Components，您可以在三种结构类型之间做出选择），而这更多的是您选择的偏好问题。

在您的示例中，您将使用管道。假设您想以粗体文本显示货币值并使用图像图标作为货币符号，您可能会采用指令

【讨论】：

第 2 行和第 3 行，这让我很容易理解其中的区别。甚至我都在转换时感到困惑，何时使用什么。