Question

我试图找出如何创建可以从调用组件自定义的组件。作为一个例子，我正在尝试构建一个名为textbox的文本输入，可以通过以下方式传递maxlength，validation-messages []等内容：

<textbox maxlength="40" validation-messages="['This field is required','This field is too long']></textbox>

textbox.component的模板类似于：

<label for...></label>
<input ... />
<div *ngIf="field.invalid && (field.dirty || field.touched)">
<div [hidden]="field.errors.required">
<!--validation messages here-->
</div></div>

我一直在尝试完成这项工作几天，但似乎无法使其正常工作。使用指令只会导致我死胡同（例如，从指令更改innerHTML会导致* ngIf无法正常工作并且验证消息始终存在，无论我使用哪个生命周期挂钩），并且据我所知，服务不能用于将数据从调用HTML发送到接收组件，但我需要能够从调用者向文本框发送变量以更改文本框的模板并保持模块化。

如果有人知道完成上述内容的正确方法，请告诉我。提前谢谢。

Answer 1

找到答案。它在this article。简单地说，使用指令格式，但只需在组件文件中使用@Input。像这样：

调用组件：

<textbox [maxlength]="40" [validation-messages]="['This field is required','This field is too long']></textbox>

包含组件（Textbox.component.ts）：

@Input validation-messages: string[];
@Input maxlength: number;

这样您可以直接使用component.ts文件中的输入，并从那里有条件地格式化component.html文件。

如何正确模块化Angular 4 w / customizability？

1 个答案: