angularjs2中的父子组件通信
父组件模板中引用子组件
// father template: ...
<child-item [name] = "fatherItemName" > </child-item>
//...`
其中”fatherItemName” 为父组件中的属性,[name] 为子组件的输入
在子组件中使用 @Input() name 来接受父组件传递的值
如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性
_name: string = '';
@Input()
set nameStr(name: string){
_name = "father name:" + name;
}
这时的 _name 作为临时变量,作为set 和get的中转。其实_name就是我们要组件中要用到的真实属性
父组件中:
< child-item [namestr] = “fatherItemName” >
name -> namestr
使用getter 输出
get nameStr(){ return _name; }
插值时 {{ nameStr }}
子到父组件之间的数据传递
1. 事件传值
// father template: ...
<child-item (childEvent) = "fatherFunction($event)"> </child-item>
//...
export class FatherComponent{
fatherFunction(){
alert('hello!');
}
}
子组件
//...
< p (click) = "clickThis"> click </ p>
//...
@Output() childEvent = new EventEmitter<boolean>();
clickThis(){
this.childEvent.emit();
}
2.父组件通过局部变量获取子组件的引用
<child-item [name] = "fatherItemName" #name > </child-item>
子组件通过#绑定一个name的局部变量来访问子组件的属性
3.使用@ViewChild 获取子组件的引用
@ViewChild(ChildComponent) child: ChildComponent;
angularjs2中的父子组件通信的更多相关文章
- vue中v-model父子组件通信
有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.是怎么实现的呢? 实际上v-model 只是语法糖而已. <input v-model="inpu ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- Vue2.x中的父子组件相互通信
业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue(二十六)父子组件通信
今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题 一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在 ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...
- Vuejs——(10)组件——父子组件通信
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
随机推荐
- 如何让springboot中的某些html文件不经过thymeleaf模板解析?
这个thymeleaf有时有用,有时用不着. 但默认设置,所有的html都会经过它解析. 我的作法,是新建public,在resource里,所有css,js所放里面.(当然,static下也是OK的 ...
- DotNetCore 笔记
最近公司框架升级到DotNetCore了,但是在用post请求的时候,发现页面的post data后台并没有接收到数据,经过调查发现,netcore用法和之前的MVC5不一样,想要接收post里的da ...
- 如何打造属于自己的Javascript武器库(封装方法)
前言 代码写的久了,就会发现很多时候都是在写一些重复的东西,这个时候就应该要考虑到提高工作效率了,比如对常用方法的封装,例如日期格式化,浏览器类型判断等. 今天这篇文章我们就来看看如何封装常用的Jav ...
- 计蒜客 18492.Upside down primes-米勒拉宾判大素数 (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 K)
K. Upside down primes 传送门 这个题就是把大数按字符串输进去,判断一下是不是素数,然后反转180度,先判断反转之后的东西是不是一个数,如果是的话,再把这个数判一下是不是素数,如果 ...
- N皇后问题(C++实现和函数式编程实现)
题意 在 N * N 的方格棋盘放置了 N 个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.求出有多少种合法的放置方法. C++实现(位运算 ...
- Redis单机部署、添加开机自启、配置参数
1.Redis简介 redis是使用C语言编写的开源的,支持网络,基于内存,可持久性的键值对存储数据库,2013年5月之前,Redis是最流行的键值对存储数据库,Redis采用内存数据集,支持多种数据 ...
- Requirement Analysis
BRD:Business Requirements Document,商业需求文档.这是产品声明周期中最早的问的文档,再早就应该是脑中的构思了,其内容涉及市场分析,销售策略,盈利预测等,通常是和老大们 ...
- 解决虚拟机安装tomcat主机访问不到
在wmware中安装linux后安装好数据库,JDK及tomcat后启动服务,虚拟机中可以访问,但是主机却无法访问,但是同时主机和虚拟机之间可以ping的通.解决方法是关闭虚拟机中的防火墙服务.桌面- ...
- ScrollView起始位置不是最顶部的解决办法
最近遇到了打开带有ScrollView的页面布局默认起始位置不是最顶部的情况,最后发现问题是因为ScrollView内部嵌套了gridview,只需要设置gridview获取焦点为false即可. g ...
- 初识交替最小二乘ALS
ALS是alternating least squares的缩写 , 意为交替最小二乘法:而ALS-WR是alternating-least-squares with weighted-λ -regu ...