ng2父子模块数据交互
一、父模块向子模块传值
//父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父子模块数据交互的更多相关文章
- 分布式环境中,模块数据交互协议分析 (百度brpc)
1. 背景 之前听到同事说,要为自己的模块考虑写个数据协议.今天有空想了一下.写出来,方便后续使用. 开源代码brpc中可以支持多种协议,nshead.redis.mongo等20多种协议. 2. 什 ...
- ng2父子模块通信@ViewChild和@Inject
一.@ViewChild 父组件中使用@ViewChild拿到子组件的变量和方法(父组件可调用子组件的方法和变量) parent.component.ts: import { Component, O ...
- vue20 父子组件数据交互
子组件使用父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- vuejs组件交互 - 01 - 父子组件之间的数据交互
父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- 【python】-- 多进程的基本语法 、进程间数据交互与共享、进程锁和进程池的使用
多进程 进程之间是相互独立的,python是启动进程的时候,是启动的是原生进程.进程是没有GIL锁的,而且不存在锁的概念,进程之间的数据式不能共享的,而线程是可以的. 1.进程的定义 用mulipro ...
- AngularJs $resource 高大上的数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...
- angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
随机推荐
- 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 ...
- EasyPusher华为手机直播推流硬编码[OMX.IMG.TOPAZ.Encoder] failed to set input port definition parameters.
EasyPusher作为一款RTSP推送利器, 配合EasyDarwin开源流媒体服务器,在发布伊始,很快获得了广大人民群众的一致好评. 但是也有一些用户反映: EasyPusher在我的华为手机上会 ...
- 怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...
- 九度OJ 1075:斐波那契数列 (数字特性)
时间限制:5 秒 内存限制:32 兆 特殊判题:否 提交:3121 解决:1806 题目描述: 编写一个求斐波那契数列的递归函数,输入n值,使用该递归函数,输出如样例输出的斐波那契数列. 输入: 一个 ...
- json (js对象标记)
基础 JSON: JavaScript Object Notation (JavaScript对象表示法) 网络媒体类型是 application/json,文件名扩展是 .json JSON 独立于 ...
- DLL的静态调用和动态调用
// ------------------------------------DLL源代码 circle.dproj -------------------------------------libr ...
- Versions 崩溃(Mac升级OS X Yonsemite 10.10)
今天兴冲冲的升级到了OS X Yonsemite 10.10,结果发现SVN工具不能用了,于是找到一个暂时的解决的方法 1.打开目录~/.subversion/servers 2.在[global] ...
- 应用索引技术优化SQL 语句(转)
原文出处 一.前言 很多数据库系统性能不理想是因为系统没有经过整体优化,存在大量性能低下的SQL 语句.这类SQL语句性能不好的首要原因是缺乏高效的索引.没有索引除了导致语句本身运行速度慢外,更是导致 ...
- 5.JavaScript优化及导航菜单背后的秘密
JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...
- B. Drazil and His Happy Friends
这是 Codeforces Round #292 (Div. 2)的一道题,原题在这里,题意就是: 小明有n个男同学(编号为 0 ~ n-1)和m个女同学 (编号为 0 ~ m-1),小明要安排男女之 ...