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

Question

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

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

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

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

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

某种...params评估？

预先感谢您的所有帮助

瓦列里奥

Answer 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.xx 及以下版本而言）。

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中的反应式形式感兴趣。您可以在官方文档中阅读有关响应式表单的信息，或者查看Todd Motto 关于 Angular 中响应式表单的文章，或Pascal Precht 在 thinkram 上撰写的 Angular 中的响应式表单。