一、父模块向子模块传值

//父html
<my-child [childdata]="parentdata"></my-child>

其中,my-child为子模块的selector标签,childdata为子模块声明的变量(用来保存父模块传递过来的值),parentdata为父模块声明的变量(保存着父模块的值)

子模块中引用父模块传过来的值:

//child.component.ts
import { Component, OnInit,Input } from '@angular/core'; @component({
selector:'my-child',
...
})
export class ChildComponent implements OnInit{
@Input() childdata:any;
//Do some action with childdata
}

二、子模块向父模块传递事件

子模块传出事件:

//child.component.ts
import { Component, OnInit,Output } from '@angular/core'; @component({
selector:'my-child',
...
})
export class ChildComponent implements OnInit{
@OUtput() childevent=new EventEmitter();
//Do some action
}

父html引用事件:

<my-child (childevent)="parentevent($event)"></my-child>

其中childevent为子模块事件,parentevent为父模块事件

ng2父子模块数据交互的更多相关文章

  1. 分布式环境中,模块数据交互协议分析 (百度brpc)

    1. 背景 之前听到同事说,要为自己的模块考虑写个数据协议.今天有空想了一下.写出来,方便后续使用. 开源代码brpc中可以支持多种协议,nshead.redis.mongo等20多种协议. 2. 什 ...

  2. ng2父子模块通信@ViewChild和@Inject

    一.@ViewChild 父组件中使用@ViewChild拿到子组件的变量和方法(父组件可调用子组件的方法和变量) parent.component.ts: import { Component, O ...

  3. vue20 父子组件数据交互

    子组件使用父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  5. vuejs组件交互 - 01 - 父子组件之间的数据交互

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...

  6. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  7. 【python】-- 多进程的基本语法 、进程间数据交互与共享、进程锁和进程池的使用

    多进程 进程之间是相互独立的,python是启动进程的时候,是启动的是原生进程.进程是没有GIL锁的,而且不存在锁的概念,进程之间的数据式不能共享的,而线程是可以的. 1.进程的定义 用mulipro ...

  8. AngularJs $resource 高大上的数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...

  9. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

随机推荐

  1. erlang的随机数 及 random:uniform()函数

    每次调用会更新进程字典里的random_seed变量,这样在同一个进程内每次调用random:uniform()时,随机数种子都不同,所以生成的随机数都不一样(调用完random:uniform()后 ...

  2. 深入Asyncio(五)Event Loop

    Event Loop loop除了处理协程间的切换与结束时的异常捕捉,还要监听socket和文件描述符.先做个小测试: >>> import asyncio >>> ...

  3. KEIL下分散加载文件的使用(zt)

    KEIL下分散加载文件的使用   对于分散加载的概念,在<ARM体系结构与编程>书中第11章有明确介绍. 分散加载文件(即scatter file 后缀为.scf)是一个文本文件,通过编写 ...

  4. windows下MySQL 5.7+ 解压缩版安装配置方法(转,写的很简单精辟 赞)

    方法来自伟大的互联网. 1.去官网下载.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下载是需要注册账户并登录的. 2.解压缩至你想要的位置. 3.复制解压目录下m ...

  5. maven scope runtime

    https://blog.csdn.net/ningbohezhijunbl/article/details/25818069 There are 6 scopes available: compil ...

  6. SPOJ SUBLEX - Lexicographical Substring Search 后缀自动机 / 后缀数组

    SUBLEX - Lexicographical Substring Search Little Daniel loves to play with strings! He always finds ...

  7. IntelliJ idea webstrom Visual Studio Code vscode 设置cmder为默认终端 Terminal

    1.系统环境win10 2.确保环境变量中存在CMDER_ROOT,没有的话新增一个.地址为*:\***\cmder . idea.webstrom:设置中搜索terminal,shell path  ...

  8. EasyPlayerPro Windows播放器全屏模式下GDI显示出现黑屏问题解决

    问题来源 2017.12.21 前天有杭州某教育领域客户反馈有部分视频源在全屏模式下显示黑屏: 问题复现 EasyPlayerPro由于没有实现单个窗口完全全屏,故没有暴露该问题,晚上加班,加上单个窗 ...

  9. iOS改变UIAlertView、UIActionSheet、UIAlertController系统字体颜色

    废话不多说,直接上代码,效果是最好的说服力 1.改变UIAlertView字体颜色 [UIView appearance].tintColor = [UIColor greenColor]; 个人还是 ...

  10. 使用服务端的临时密钥,不依赖阿里js的putFIle--》阿里oss

    <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title> ...