解法一

概括和流程

定义了两个组件,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. Perl读写Excel简单操作

    Perl读写Excel简单操作 使用模块 Spreadsheet::ParseExcel Spreadsheet::WriteExcel 读Excel #!/usr/bin/perl -w use s ...

  2. 线程之一:JAVA线程基础 分类: B1_JAVA 2013-10-10 12:48 662人阅读 评论(0) 收藏

    参考core java,马士兵视频 1.线程的基本概念 (1)一个线程是一个程序内部的顺序控制流.   (2)线程和进程 –每个进程都有独立的代码和数据空间(进程上下文),进程切换的开销大. –线程: ...

  3. AE指定字段转成注记

    转自原文 ae指定字段转成注记 ArcMap中有一个功能是Label Features,就是可以将图层内指定字段值显示以Label形式显示在主窗口上,在Label Features后,用右键点击图层, ...

  4. Android MediaScanner使用简单介绍

    1. 运行扫描 仅仅有系统开机的时候才会运行MediaScanner,其他情景下须要手动运行扫描(拍摄,下载等). 手动运行扫描的方法是发送MediaScanner广播: 1.1 扫描指定文件: In ...

  5. ios开发利用AFN检测网络状态

    AFNetworkReachabilityManager *manager = [AFNetworkReachabilityManager sharedManager]; [manager setRe ...

  6. [网络管理]windows server backup

    ERPserver每天备份与每月1号备份数据.备份到本机.从备份安全机制来说这是远远不够的.故是否能定期备份数据文件到另外一台server呢?(异地备份) windows server 提供了serv ...

  7. Python科学计算(一)

    一.准备教材:<python科学计算> 作者: 张若愚  出版社: 清华大学出版社 出版年: 2012-1 页数: 621 定价: 98.00元 装帧: 平装 ISBN: 97873022 ...

  8. Service熟人

    Service 为一体的四个分量间(剩余有Activity ,内容提供商,广播),它属于后台工作,能够在后台很长一段时间执行,他没有接口. 首先从使用方式上来说来说 他有两种使用方式: 1.启动式使用 ...

  9. 网络编程C#

    C#网络程序设计(1)网络编程常识与C#常用特性     网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的 ...

  10. Java实现多文件压缩打包的方法

    package com.biao.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutpu ...