Angular - 从子组件访问主机属性

时间:2018-05-16 07:25:38

标签: angular

我创建了一组自定义表单组件,用于呈现标签,输入和验证。

该组件具有一个布局属性,允许设置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>

请注意,组件可以托管在许多表单/组件中,所以我真的不知道主机类型是什么。

1 个答案:

答案 0 :(得分:1)

我建议您使用service@ViewChild在父母和孩子之间进行沟通。我在粘贴的指南网址中对此进行了描述。

修改 检查此answer,但这取决于父组件类型。

其他选项是使用@Input并将父实例传递到每个my-input