父到子

父组件:
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. Django实现文章按年月归档、点赞和评论、发送邮件

    文章归档的实现 我们在创建文章时,会在数据库中存储文章创建的时间这样的字段,一般用的都是datetime类型,记录文章创建的年月日和时分秒,所以我们直接使用文章的创建时间分类是无法实现文章的按年月归档 ...

  2. 冒泡法的算法最佳情况下的时间复杂度为什么是O(n)

    我在许多书本上看到冒泡排序的最佳时间复杂度是O(n),即是在序列本来就是正序的情况下. 但我一直不明白这是怎么算出来的,因此通过阅读<算法导论-第2版>的2.2节,使用对插入排序最佳时间复 ...

  3. 【PAT】1011. A+B和C (15)

    1011. A+B和C (15) 给定区间[-231, 231]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测 ...

  4. c++ primer 3 标准库类型

    3.1 命名空间的using声明 using声明是对某个命名空间做引入.主要作用是简化代码编写. 比如用cout的三种方式: using namespace std; using std::cout; ...

  5. react + redux 实现幻灯片

    写在前面: 这一篇是我 使用scss + react + webpack + es6实现幻灯片 的进阶篇,效果请点我,将会使用上redux的基础用法,因为一开始没有理解好redux的用法,单纯看文档, ...

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

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

  7. Deepin 2015 火狐 Firefox安装Flash

    1.sudo apt-get install flashplugin-nonfree 2.至Abobe官网下载最新的Linux版本flash安装包,选择.tar.gz类型,下载(https://get ...

  8. loadrunner中controller 中scenario-> rendezvous灰色不可用的解决方法:

    1.首先确保lr_rendezvous("login");函数添加成功  Action() { web_set_max_html_param_len("2048" ...

  9. yum软件搜索

    安装软件却记不清包名,搜索出所有带SDL的包yum list *SDL* yum install xxx 列出所有的安装套件yum group list yum group install xxx

  10. 洛谷P2730 魔板 [广搜,字符串,STL]

    题目传送门 魔板 题目背景 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 题目描述 我们知道魔板的每一个方格都有 ...