我创建了一组自定义表单组件,用于呈现标签,输入和验证。
该组件具有一个布局属性,允许设置HTML元素的位置(该组件具有默认值)。
在大多数情况下,特定表单上所有组件的布局都是相同的。我希望能够在主机组件上设置布局,以便组件尝试从主机组件中获取它。
所以不要像以下那样重复布局:
<div class='input-group'>
<my-input type="text" id="name" label="Name" [layout] ="{'col_label':2, 'col_input':3,'col_validation':2}"></my-input>
<my-input type="text" id="address" label="address" [layout] ="{'col_label':2, 'col_input':3,'col_validation':2}"></my-input>
<my-input type="number" id="zip" label="zip" [layout] ="{'col_label':2, 'col_input':3,'col_validation':2}"></my-input>
</div>
我将在Form的组件上有属性
export class UserFormComponent {
col_label=2;
col_input=3;
col_validation'=2;
.
.
.
}
在组件上我可以向主机查询值(如果存在)。类似的东西:
.
.
this._gridLabelColumn = parent.col_label;
this._gridInputColumn = parent.col_input;
.
.
这会使html更短:
<div class='input-group'>
<my-input type="text" id="name" label="Name"></my-input>
<my-input type="text" id="address" label="address"></my-input>
<my-input type="number" id="zip" label="zip"></my-input>
</div>
请注意,组件可以托管在许多表单/组件中,所以我真的不知道主机类型是什么。
答案 0 :(得分:1)
我建议您使用service或@ViewChild在父母和孩子之间进行沟通。我在粘贴的指南网址中对此进行了描述。
修改强> 检查此answer,但这取决于父组件类型。
其他选项是使用@Input
并将父实例传递到每个my-input
。