Angular组件间的数据传输

解法一

概括和流程

定义了两个组件，data-transfer-two和data-transfer-two-child，由data-transfer-two引用data-transfer-two-child，实现二者之间的数据传输

data-transfer-two通过input将数据传入data-transfer-two-child ->data-transfer-two-child将数据存入form表单 ->data-transfer-two定义data-transfer-two-child组件对象 ->data-transfer-two通过组件对象获取data-transfer-two-child内部的相关数据

关键代码

data-transfer-two

<!--data是自定义的输入输出，输入的是数据，同时给组件取名为dataTransferTwoChild--> <app-data-transfer-two-child #dataTransferTwoChild [data]='data'></app-data-transfer-two-child> // 根据前端的命名获得组件 @ViewChild('dataTransferTwoChild') compDataTransferTwoChild: DataTransferTwoChildComponent; // 子组件 // 验证子组件表单 for (const i in this.compDataTransferTwoChild.childValidateForm.controls){ if (this.compDataTransferTwoChild.childValidateForm.controls[i].errors != null) { this.msg.error('请确认表单输入'); return; } } // 获得子组件数据 let childData=Object.assign(this.data, this.compDataTransferTwoChild.childValidateForm.value);

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Website/DotNetCore/CoreNgAlain/src/app/routes/data-transfer-two

解法二

概括和流程

定义了两个组件，data-transfer和data-transfer-child，由data-transfer引用data-transfer-child，实现二者之间的数据传输

data-transfer通过input将数据传入data-transfer-child ->data-transfer-child将数据存入form表单 ->监控form表单数据变化，通过output调用方法通知data-transfer ->data-transfer拼凑两个组件的数据，得到结果

关键代码

data-transfer

<nz-tabset [(nzSelectedIndex)]="tabIndex"> <nz-tab nzTitle="Tab2"> <!--[]代表输入，()代表输出--> <!--data和dataChange是自定义的输入输出，输入的是数据，输出的是方法--> <app-data-transfer-child [data]='data' (dataChange)='getTime($event)'></app-data-transfer-child> </nz-tab> </nz-tabset> /** * @description 获得输出 */ getTime=function(e){ // 返回表单和数据 // 这里的数据是在子组件里面emit的数据 this.data.time=e.data.time; this.childValidateForm=e.childValidateForm; }

data-transfer-child

<form nz-form [formGroup]="childValidateForm"> <nz-form-item> <nz-form-label [nzSpan]="3" nzRequired>登记时间</nz-form-label> <nz-form-control [nzSpan]="8" nzHasFeedback> <!--使用ngModelChange随时监听数据变化--> <nz-date-picker [nzFormat]="yyyy/MM/dd" id="_time" formControlName="time" (ngModelChange)="changeData()"></nz-date-picker> </nz-form-control> </nz-form-item> </form> // 输入 @Input() data; // 输出 @Output() dataChange: EventEmitter<any> = new EventEmitter(); childValidateForm: FormGroup; /** * @description 监听数据变化并返回给父组件 */ changeData=function(){ // 因为子组件没有类似于提交的按钮，否则emit可以在点击按钮的时候调用，表单验证也可以放在子组件内 this.data=Object.assign(this.data, this.childValidateForm.value); this.dataChange.emit({data:this.data,form:this.childValidateForm}); }

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Website/DotNetCore/CoreNgAlain/src/app/routes/data-transfer

参考资料

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

转载于:https://www.cnblogs.com/Lulus/p/10040506.html