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);
示例代码
解法二
概括和流程
定义了两个组件,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});
}
示例代码
参考资料
Sharing Data Between Angular Components - Four Methods
Angular组件间的数据传输的更多相关文章
- 【Android开发日记】之入门篇(十二)——Android组件间的数据传输
组件我们有了,那么我们缺少一个组件之间传递信息的渠道.利用Intent做载体,这是一个王道的做法.还有呢,可以利用文件系统来做数据共享.也可以使用Application设置全局数据,利用组件来进行控制 ...
- angular组件间的通信(父子、不同组件的数据、方法的传递和调用)
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- angular组件间的信息传递
原文 https://www.jianshu.com/p/82207f2249c1 大纲 1.父组件向子组件传递信息:通过属性 2.子组件向父组件传递信息:通过事件 3.父组件获取子组件的信息:通过调 ...
- Vue组件间的数据传输
1.父组件向子组件传输数据:自定义属性 1 //父组件 2 <Son :msg="message" :user="userinfo"></So ...
- Android组件间的数据传输
组件我们有了,那么我们缺少一个组件之间传递信息的渠道.利用Intent做载体,这是一个王道的做法.还有呢,可以利用文件系统来做数据共享.也可以使用Application设置全局数据,利用组件来进行控制 ...
- Angular : 响应式编程, 组件间通信, 表单
Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...
- Angular组件——父子组件通讯
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...
- Angular组件之间通讯
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
- 后端学 Angular 2 —— 组件间通信
1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...
随机推荐
- [Http] Understand what an HTTP Request is
Let's look at several HTTP requests to learn the basic structure of these messages, and how the vari ...
- [AngularFire2] Building an Authentication Observable Data Service
After successfully login, we want something help to check whether user has already login or not. And ...
- POST提交数据时四种常见的数据格式
最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有,就用soupui调对应接口开测试,soupui使用比较简单,给上接口地址,入参xml报文,把入参的media Type设置为app ...
- [Javascript] Case insensitive sorting for string arrays
We look at the default Array.prototype.sort behavior and discuss how you can do case insensitive str ...
- Android 虚拟机学习总结Dalvik虚拟机介绍
1.Dalvik虚拟机与Java虚拟机的最显著差别是它们分别具有不同的类文件格式以及指令集.Dalvik虚拟机使用的是dex(Dalvik Executable)格式的类文件,而Java虚拟机使用的是 ...
- JavaEE 三层架构的浅谈
三层架构 三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).区分层次的目的即为了“高内聚,低 ...
- [SCSS] Organize SCSS into Multiple Files with Partials
Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your perform ...
- net的微服务架构
net的微服务架构 眼下,做互联网应用,最火的架构是微服务,最热的研发管理就是DevOps, 没有之一.微服务.DevOps已经被大量应用,它们已经像传说中的那样,可以无所不能.特来电云平台,通过近两 ...
- C# 关于反射事件
在frmMain类中的代码 private void StartRun(string tag, string date, bool tipType) { var d ...
- skip-slave-start的重要性
原来做复制的主机因为数据丢失需要重新创建复制环境,机器上已经有了主库数天前的备份,于是删除数据目录直接把备份放上去,结果发现复制没有抱错,show slave status一切正常,select co ...