html Angular :指令与管道

t5fffqht  于 2023-02-27  发布在  Angular
关注(0)|答案(2)|浏览(191)

创建和使用指令与创建和使用管道的参数是什么?

这个问题源于一个关于货币投入和产出的情景。
如果用户需要输入货币,为什么不创建/使用一个指令,将输入解析为格式化的货币字符串呢?另一种选择是接受该字符串,并通过管道显示它,如下所示:

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

另一方面,可以在由输入触发的控制器/组件中使用管道来过滤值。
我可以问很多问题,但我最想知道的是:每一项的参数是什么?

rsaldnfx

rsaldnfx1#

为了用最简单的术语来说明问题,我会说管道用于操作 * 数据 *,而指令更多地用于 *DOM操作 *。
管道获取数据作为输入,转换数据并以另一种方式输出数据。
一个指令获取一个它“附加”到的DOM元素,并用某种特性增强它。
当然,您会发现这两种类型都有意义的示例(考虑Components,您有三种结构类型可供选择),这更多的是您选择哪种类型的偏好问题。
在您的示例中,您将使用一个 * 管道 *。假设您希望以粗体文本显示货币值,并使用图像图标作为货币符号,您可能需要使用一个 * 指令 *

cxfofazt

cxfofazt2#

在Angular中,管道是一种编写可在HTML中声明的显示值转换的方法。和指令提供功能并可转换DOM。默认管道使用Angular将多个值传递到管道中以获取值和默认值的能力。指令是没有视图的装饰器。
来自极客靴
正如前面提到的,基本上不同之处在于指令接收DOM元素并影响它们,而管道接收数据并影响它。

相关问题