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元素的封装,应用场合为控件重用和逻辑模 ...
随机推荐
- Svn服务器备份迁移小结
注:svn备份千万不要采用打包压缩,然后解压文件的方式. 备份和还原之前先要关掉svn服务器. svn备份一般采用三种方式: 1)svnadmin dump 2)svnadmin hotcopy 3) ...
- android 底部菜单栏实现(转)
1.Android学习之BottomNavigationBar实现Android特色底部导航栏 2.Android底部导航栏的四种实现 3.Android BottomNavigationBar底部导 ...
- 将到来的战略转变:移动 Web 还是移动 Apps?
目前来看,移动应用比移动网站的易用性更高,但变化即将发生,移动网站最终将优于Apps,成为更好的策略选择. 一家公司制定移动策略时,最重要的问题是:是否需要考虑为移动设备特别做点什么.一些公司永远都不 ...
- Android:实现两个Activity相互切换而都不走onCreate()
本文要实现的目的是: 有3个Activity: A,B,C.从A中能够进入B,B中能够进入C.而且B和C之间可能须要多次相互切换,因此不能使用普通的startActivity-finish方式,由于又 ...
- Android-解决Fail to post notification on channel "null"的方法
原文:https://blog.csdn.net/weixin_40604111/article/details/78674563 在sdk版本为25或25之前想在notification中添加一个点 ...
- DIV+CSS一些小小的技巧
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码 以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实 ...
- 【BZOJ3489】A simple rmq problem kd-tree
[BZOJ3489]A simple rmq problem Description 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过 ...
- Eclipse + JDK + tomcat开发环境配置
第一步:下载jdk和tomcat:JDK下载 Tomcat下载 最新的jdk为1.6.10,tomcat为6.0,建议jdk1.4以上,tomcat4.0以上 第二步:安装和配置 ...
- 【题解】[CJOI2019]Cipher
[题解][CJOI2019]Cipher 题目描述 给定你\(p\)进制数\(s\),\(p \le 9+26\),求对于十进制数\(k\),求\(k^s \equiv ? \mod m\) 数据范围 ...
- wireshark 学习 3 display filter
过滤信息,得到想要的帧进行分析. http://www.networkcomputing.com/networking/wifi-troubleshooting-using-wireshark/155 ...