一、父模块向子模块传值

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

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

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

  1. //child.component.ts
  2. import { Component, OnInitInput } from '@angular/core';
  3.  
  4. @component({
  5. selector:'my-child',
  6. ...
  7. })
  8. export class ChildComponent implements OnInit{
  9. @Input() childdata:any;
  10. //Do some action with childdata
  11. }

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

子模块传出事件:

  1. //child.component.ts
  2. import { Component, OnInitOutput } from '@angular/core';
  3.  
  4. @component({
  5. selector:'my-child',
  6. ...
  7. })
  8. export class ChildComponent implements OnInit{
  9. @OUtput() childevent=new EventEmitter();
  10. //Do some action
  11. }

父html引用事件:

  1. <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和golang的比较

    1)垃圾回收GC 像 Java 一样,Go 的垃圾回收是全局的,这意味着一旦垃圾回收被触发,所有的 goroutine 都会被暂停,造成一段时间的业务延迟. Erlang 的垃圾回收是进程级别的,每一 ...

  2. 离线安装Cloudera Manager5.3.4与CDH5.3.4(一)

    这几天一直在安装CDH,头都搞大了,安装第三次,最终成功了. 第一次问题非常多.后面卸载了.由于没有卸载干净导致第二次安装失败. 后来索性重装系统了.直接使用了纯净系统进行安装.一个人跑到学院机房去装 ...

  3. EasyPlayer Android安卓RTSP服务器低延时再优化策略

    EasyPlayer低延迟再优化策略 EasyPlayer是一款专门针对RTSP协议进行过优化的播放器.其中两个我们引以为傲的的优点就是起播快和低延迟.最近我们遇到一些需求,其对延迟要求非常苛刻,于是 ...

  4. .Net反射机制

    现在谈.Net反射机制本不在计划中,因为本打算研究完设计模式后再去学习别的技术:但迫于设计模式系列一创建型之(抽象工厂模式)一章中遗留问题,才不得已在设计模式之游中插入本篇文章!签于本人对反射理解也不 ...

  5. MethodDispatcher—Cherrypy对REST的支持

    前言 CherryPy是Python的一个Web框架,通过MethodDispatcher内建了对REST的支持,而且使用非常方便. 示例 首先,我们需要有一个符合REST风格的资源(Resource ...

  6. ubuntu把文件移动到指定的文件夹

    有个文件a.txt在/etc下,想把它移动到/etc/fuck文件夹中 cd /etc/fuck sudo mv a.txt 要移动到的文件夹 没报错就成功了

  7. mysql服务突然不能启动

    mysql之前一直用的好好的,今天突然不能启动.前几天改过my.ini文件,在[mysqld]下添加了default-character-set=utf8.查看日志发现是添加的那句话的错误,删除.并且 ...

  8. Ubuntu/CentOS下使用脚本自动安装 Docker

    Ubuntu.Debian 系列安装 Docker 系统要求 Docker 支持以下版本的 Ubuntu 和 Debian 操作系统: Ubuntu Xenial 16.04 (LTS) Ubuntu ...

  9. 项目发布之后 总提示有一个.DLL找不到或不匹配

    最近发布项目(.net,winform)总提示有一个.dll文件找不到或者不匹配 但是在本地调试是正常的 这个.dll,原来是从.net组件中引用到项目的,后来我将此.dll文件从网上下载,然后在项目 ...

  10. <再看TCP/IP第一卷>关于链路层的知识细节及相关协议

    在TCP/IP协议族中,链路层的主要有三个目的: (1)为IP模块发送和接受数据报 (2)为ARP模块发送ARP请求和接受ARP应答 (3)为RARP发送RARP请求和接受RARP应答 TCP/IP支 ...