父到子

父组件:
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. HTML文件编码

    为了防止中文乱码,一般在网页头文件中加入 <meta http-equiv="Content-Type" content="text/html; charset=u ...

  2. ntp 校时程序

    //effect:send ntp packet and get the ntp packet ,make the time OK//2014.7.31 is OK//#include <sys ...

  3. SICP第三章题解

    目录 SICP第三章题解 ex3-17 ex3-18 ex3-19 队列 ex3-21 ex3-22 ex3-24 ex3-25 3.4 并发:时间是一个本质问题 ex3-38 3.4.2 控制并发的 ...

  4. day4装饰器

    Python装饰器 1.必备 def foo(): print(foo) <function foo at 0x7f62db093f28> >>> foo <fun ...

  5. 133个Java面试问题列表

    转载: 133个Java面试问题列表 Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来 ...

  6. 洛谷P3834 [模板]可持久化线段树1(主席树) [主席树]

    题目传送门 可持久化线段树1(主席树) 题目背景 这是个非常经典的主席树入门题——静态区间第K小 数据已经过加强,请使用主席树.同时请注意常数优化 题目描述 如题,给定N个正整数构成的序列,将对于指定 ...

  7. salt 常用命令整理

    salt 常用命令整理 ***********模块*********** 查看模块列表module salt 'minion' sys.list_modules 查看指定module的function ...

  8. Django+Nginx+uwsgi搭建自己的博客(二)

    在上一篇博客中,为大家介绍了Django的一些基本概念以及建立了第一个App——Users,并且在数据库中建立了对应的表. 在这篇博客中,将为大家继续介绍数据库模型的定义和相关操作,以及Users A ...

  9. XV6操作系统代码阅读心得(四):虚拟内存

    本文将会详细介绍Xv6操作系统中虚拟内存的初始化过程. 基本概念 32位X86体系结构采用二级页表来管理虚拟内存.之所以使用二级页表, 是为了节省页表所占用的内存,因为没有内存映射的二级页表可以不用分 ...

  10. django 编码错误

    估计这个问题是2.7的问题3.0好像就统一utf编码了 报错代码: python :ascii codec can't decode byte 0xe8 in posi 当django中报这个错误的时 ...