一、父模块向子模块传值

//父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. HDU 5343 MZL's Circle Zhou 后缀自动机+DP

    MZL's Circle Zhou Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  2. EasyPusher华为手机直播推流硬编码[OMX.IMG.TOPAZ.Encoder] failed to set input port definition parameters.

    EasyPusher作为一款RTSP推送利器, 配合EasyDarwin开源流媒体服务器,在发布伊始,很快获得了广大人民群众的一致好评. 但是也有一些用户反映: EasyPusher在我的华为手机上会 ...

  3. 怎么利用jquery.form 提交form

    说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...

  4. 九度OJ 1075:斐波那契数列 (数字特性)

    时间限制:5 秒 内存限制:32 兆 特殊判题:否 提交:3121 解决:1806 题目描述: 编写一个求斐波那契数列的递归函数,输入n值,使用该递归函数,输出如样例输出的斐波那契数列. 输入: 一个 ...

  5. json (js对象标记)

    基础 JSON: JavaScript Object Notation (JavaScript对象表示法) 网络媒体类型是 application/json,文件名扩展是 .json JSON 独立于 ...

  6. DLL的静态调用和动态调用

    // ------------------------------------DLL源代码 circle.dproj -------------------------------------libr ...

  7. Versions 崩溃(Mac升级OS X Yonsemite 10.10)

    今天兴冲冲的升级到了OS X Yonsemite 10.10,结果发现SVN工具不能用了,于是找到一个暂时的解决的方法 1.打开目录~/.subversion/servers 2.在[global] ...

  8. 应用索引技术优化SQL 语句(转)

    原文出处 一.前言 很多数据库系统性能不理想是因为系统没有经过整体优化,存在大量性能低下的SQL 语句.这类SQL语句性能不好的首要原因是缺乏高效的索引.没有索引除了导致语句本身运行速度慢外,更是导致 ...

  9. 5.JavaScript优化及导航菜单背后的秘密

    JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...

  10. B. Drazil and His Happy Friends

    这是 Codeforces Round #292 (Div. 2)的一道题,原题在这里,题意就是: 小明有n个男同学(编号为 0 ~ n-1)和m个女同学 (编号为 0 ~ m-1),小明要安排男女之 ...