解法一
概括和流程
定义了两个组件,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/