Angular:指令与管道

Question

创建和使用指令与创建和使用管道有什么相关的参数.

这个问题源于的情景是货币输入和输出.

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

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

VS

// 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>

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

我可以问一些关于它的问题,但我基本上想知道:每个问题的论点是什么？

Answer 1

为了用最简单的术语来表达它,我会说管道是操纵数据,而指令更适合DOM操作.

管道将数据作为输入,转换并以另一种方式输出该数据.

指令获取一个"附加"的DOM元素,并通过某种功能对其进行增强.

当然,你会发现两个都有意义的例子(考虑Components到并且你有三种结构类型来决定),这更像是你选择的偏好问题.

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