父到子

父组件:
ts部分:
@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.css'],
})
export class InfoComponent implements OnInit { num:number = ; constructor() { }
changeNum(){
this.num++;
} } 模板部分:
<button (click)="changeNum()">传递给子组件</button>
<app-child [content]="num"></app-child> 子组件:
ts部分:
@Input() content:number;
模板部分:
<p>{{ content }}</p>

子到父

父组件
public how : string = "how";
getDate(str:string){
this.how = str;
} <app-list (updateNumber)="getDate($event)"></app-list> 子组件
impress(str:string){
let data = str;
this.updateNumber.emit(data)
} <ul>
<li *ngFor="let item of items" (click)="impress(item)">{{ item }}</li>
</ul>

angular2组件通信的更多相关文章

  1. Angular2 组件通信

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...

  2. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  3. angular2+ 组件间通信

    angular2+ 不同于react的redux,vue的vuex,angular2+其实可实现数据状态管理的方法很多,以下方案一般也足够支撑普通业务: 父子组件通信 1.1 父组件向子组件传递信息( ...

  4. angular2 组件交互

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...

  5. angular5 组件通信(一)

    用了两年angular1,对1的组件通信比较熟练,最直接的就是直接使用scope的父子节点scope就可以实现,且基本都是基于作用域实现的通信:还有就是emit,broadcast,on这几个东西了. ...

  6. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  7. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  8. vue.js入门(3)——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  9. Intent进行组件通信的一些体会

    Intent进行组件通信的原理 l  Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...

随机推荐

  1. POJ 1392 Ouroboros Snake(数位欧拉)

    题目链接:http://poj.org/problem?id=1392 题目大意:题意看的我头痛,其实跟HDU2894差不多,但是这题要求输出这条路径上第k个数,而不是输出路径. 解题思路:也跟HDU ...

  2. luogu P1549 棋盘问题(2) 题解

    luogu P1549 棋盘问题(2) 题解 题目描述 在\(N * N\)的棋盘上\((1≤N≤10)\),填入\(1,2,-,N^2\)共\(N^2\)个数,使得任意两个相邻的数之和为素数. 例如 ...

  3. 深入理解计算机系统项目之 Shell Lab

    博客中的文章均为meelo原创,请务必以链接形式注明本文地址 Shell Lab是CMU计算机系统入门课程的一个实验.在这个实验里你需要实现一个shell,shell是用户与计算机的交互界面.普通意义 ...

  4. git与pycharm合并,珠联璧合

    前段时间提交代码都是各种手写push push push,好蠢,今天尝试了一下ide直接提交,爽的一匹,做个总结. 首先github帐号肯定要有. 看图,设置好帐号啥的 再设置git路径,这个应该自动 ...

  5. ssh连接远程主机免密登入

    核心思想: 1.本地主机生成公钥私钥,私钥自己存着,公钥传到远程主机.ssh文件夹下authorized_keys文件(默认是这个,用追加的方式) 2.本地连接远程主机,公私钥对上就可以免密登入了. ...

  6. es6js promise在ie中报错“未定义”

    解决办法,我使用https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js直接引入在html中,也可以安装相应的babel-po ...

  7. 【洛谷】P4585 [FJOI2015]火星商店问题

    题解 题目太丧,OJ太没有良心,我永远喜欢LOJ! (TLE报成RE,垃圾洛谷,我永远喜欢LOJ) 好的,平复一下我debug了一上午崩溃的心态= =,写一写这道题的题解 把所有限制去掉,给出一个值, ...

  8. 简单的oracle sql语句练习

    简单的oracle sql语句练习 求每个部门的平均薪水 select deptno,avg(sal) from emp group by deptno 每个部门同一个职位的最大工资 select d ...

  9. JavaScript中变量、作用域、内存问题

    这几天,闲的没事看看JavaScript高级编程,感觉JavaScript真的很强大,尤其是采用面向对象的编程方式. 一.   基本类型和引用类型的值: ECMAScript变量可能包含两种不同数据类 ...

  10. 关于Hibernate中的临时态, 持久态, 游离态

    三态的基本概念: 1, 临时状态(Transient):也叫自由态,只存在于内存中,而在数据库中没有相应数据.用new创建的对象,它没有持久化,没有处于Session中,处于此状态的对象叫临时对象: ...