解法一

概括和流程

定义了两个组件,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});
}

示例代码

示例代码

参考资料

Sharing Data Between Angular Components - Four Methods

Angular组件间的数据传输的更多相关文章

  1. 【Android开发日记】之入门篇(十二)——Android组件间的数据传输

    组件我们有了,那么我们缺少一个组件之间传递信息的渠道.利用Intent做载体,这是一个王道的做法.还有呢,可以利用文件系统来做数据共享.也可以使用Application设置全局数据,利用组件来进行控制 ...

  2. angular组件间的通信(父子、不同组件的数据、方法的传递和调用)

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  3. angular组件间的信息传递

    原文 https://www.jianshu.com/p/82207f2249c1 大纲 1.父组件向子组件传递信息:通过属性 2.子组件向父组件传递信息:通过事件 3.父组件获取子组件的信息:通过调 ...

  4. Vue组件间的数据传输

    1.父组件向子组件传输数据:自定义属性 1 //父组件 2 <Son :msg="message" :user="userinfo"></So ...

  5. Android组件间的数据传输

    组件我们有了,那么我们缺少一个组件之间传递信息的渠道.利用Intent做载体,这是一个王道的做法.还有呢,可以利用文件系统来做数据共享.也可以使用Application设置全局数据,利用组件来进行控制 ...

  6. Angular : 响应式编程, 组件间通信, 表单

    Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...

  7. Angular组件——父子组件通讯

    Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...

  8. Angular组件之间通讯

    组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...

  9. 后端学 Angular 2 —— 组件间通信

    1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...

随机推荐

  1. Qt on Android: http下载与Json解析

    百度提供有查询 ip 归属地的开放接口,当你在搜索框中输入一个 ip 地址进行搜索,就会打开由 ip138 提供的百度框应用,你能够在框内直接输入 ip 地址查询.我查看了页面请求,提取出查询 ip ...

  2. ios开发事件处理之:五:事件的响应

  3. ios开发级联菜单(利用父子控制器--两个菜单封装为两个子控制器来实现)

    一:1:级联菜单可以使用两个tableView来实现,也可以利用父子控制器,两个控制器来实现,根视图控制器作为两个控制器的父控制器,来管理两个子控制器.2:将左右菜单分别交给两个控制器去管理,对于一些 ...

  4. JavaEE分层知识点粗略解释

    JavaEE知识点总结 什么是分层开发? 一种化大为小,分而治之的软件开发方法. 分层的特点: 1.每一层都有自己的责任. 2.上一层不用关心下一层的实现细节,上一层通过下一层 提供的对外接口来使用其 ...

  5. 【????】最短路(short)

    问题描述: 给出N个点,M条无向边的简单图,问所有点对之间的最短路. 数据输入: 第1行两个正整数N,M(N<=100,M<=5000) 下面M行,每行3个正整数x, y, w,为一条连接 ...

  6. Linux中的zip与scp

    现在只是学会基本操作,不深究各个参数的含义 一般操作目录时,都有一个-r代表递归操作整个目录下的所有内容 压缩一个目录test到test.zip zip -r test test.zip 解压test ...

  7. js实现表格配对小游戏

    js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...

  8. html5和html的区别是什么(精问)

    html5和html的区别是什么(精问) 一.总结 一句话总结:html5:简洁(文档生命,链接引入) 语义化(语义化标签)  API(canvas,地理位置等)  一些标签(input新类型) 二. ...

  9. ITFriend创业败局(三):技术人员创业,需要尽可能避免,或者需要解决的5个重要问题

    一.插科打诨: 本想给小雷粉,做一个创业"成功案例"的,结果做成了一个"反面教材"~ No zuo,no die~ 二.写作目的:分享自己作为一名技术人员,或者 ...

  10. 【codeforces 765D】Artsem and Saunders

    [题目链接]:http://codeforces.com/contest/765/problem/D [题意] 给你一个函数f(x); 要让你求2个函数g[x]和h[x],使得g[h[x]] = x对 ...