Angular 2+将指令传递给自定义组件

Posted 2023-02-22

【中文标题】Angular 2+将指令传递给自定义组件

【英文标题】：Angular 2+ pass directives to a custom component

【发布时间】：2018-06-14 01:25:49

【问题描述】：

我创建了一个自定义组件，它拥有自己的@input()、@output 等等。该组件有一个<input /> 字段，用户可以在其中输入一些值。

例如：<my-component ...></my-component>

我在我的 html 中引用了它，它完美地工作。我还创建了几个通过简单的正则表达式验证表单输入数据的指令。我可以在表单中的普通输入中使用它们，例如：

<input type="text" validator1 validator2 validator3 />

有没有办法将这些指令中的一个或多个（但也没有一个）传递给我的自定义组件，而无需在组件的源代码中对其进行硬编码？

要评估某种...params？

提前感谢您的所有帮助

瓦莱里奥

【参考方案1】：

您正在寻找的模式绝对是可能的，但从某种意义上说，通过指令无法实现。这是因为 Angular 是编译的，这意味着你不能不“硬编码”一个指令（至少不能不做一些不建议在生产中做的奇怪的事情)。

您的组件可以接受名为validators 的输入，该输入应该是一个函数数组（或类的实例，如果需要），然后使用它来验证。

例如，您可以拥有以下三个超级简单的验证器：

export const required   = value => value != null && value != ''
export const minLength3 = value => value == null || value.length > 3
export const maxLength9 = value => value == null || value.length < 9

您的my-component 接受这些验证器的数组。为简单起见，验证器实际上是字符串的谓词。换句话说，它是一个与上面三个函数具有相同签名的函数：(value: string) => boolean。我们将此输入初始化为一个空数组，有效地将其设为默认值，以防没有任何内容传递给它。

@Input() validators: ((value: string) => boolean)[] = []

在消费者组件的模板（使用my-component 的组件）中，我们现在通过向下传递一组验证器来使用该组件。

<my-component [validators]="[required, maxLength9]"></my-component>

当然，要使用它们，我们必须对它们进行 DI 或简单地将它们实例化为组件类的成员。要将其与 DI 一起使用，验证器必须是类（至少就 5.x.x 及以下版本而言）。

import required, maxLength9 from '../validators'
export class ConsumerComponent 
  public required = requierd
  public maxLength9 = maxLength9

my-component 组件当然应该使用这些验证器。例如，可以在每个 change 或 input 或 blur 事件上运行以下函数，具体取决于您希望何时运行验证器。

public validate(value: string): boolean 
  let valid: boolean = true
  this.validators.forEach(validator => 
    const result = validator(value)
    valid = valid || result
  )

您现在可以更好地动态控制要在现场运行的验证器。当然，您也可以在应用程序运行时动态更改这些。这需要付出以下代价：不使用未使用的验证器进行树摇动。 Angular 编译器无法再确定您正在使用哪些验证器，这意味着所有验证器都必须导入到您应用的最终捆绑包中，即使其中一些可能永远不会使用。

---

您可能对Angular 中的反应式表单感兴趣。您可以阅读有关reactive forms in official documentation 的信息，或查看Todd Motto's article on reactive forms in Angular 或Reactive Forms in Angular by Pascal Precht on thoughtram。

【讨论】：

太棒了。我需要进行更多修改以使其更通用，但这绝对是我正在寻找的解决方案