Angular 父组件向子组件传值@Input

1.基础用法

在Angular中，我们可以使用变量传递数据，从而实现父组件到子组件的数据交互。

<gl-form-editor-template        
       #childInputEditorTemplate
       [formData]="item.formData"
       [fields]="item.systemSchemeEdit"
        layout="vertical"
 ></gl-form-editor-template>

这是自定义表单组件，通过formData传递表单数据，通过fields传递表单字段数组，从而在子组件内部生成动态表单，通过layout指定排列方式。

@Input() layout: 'horizontal' | 'vertical' = 'horizontal';

<form nz-form [formGroup]="form" [nzLayout]="layout">

在子组件中进行接收，并在子组件中进行使用。

2.@Input set/get 用法

除去简单的传值之外，我们可以用set方法和get方法对数据进行简单的处理以及进行一些简单的逻辑处理，使之更好的实现功能。

 /**
     * 字段列表
     */
    _fields = <any>[];
    @Input() set fields(value: any[]) {
        this._fields = value || [];
        if (this._fields.length > 0) {
            this.buildForm();
        }
    }
    get fields() {
        return this._fields;
    }

 

在传入字段列表后，使用set方法进行逻辑判断非空之后，直接进行表单的构建。并使用get方法将fields暴露出去。