Question

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

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

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

Answer 1

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

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

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

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

1 个答案: