父到子

父组件:
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. str.format() 格式化字符串函数

    语法 它通过{}和:来代替%. “映射”示例 通过位置 In [1]: '{0},{1}'.format('kzc',18) Out[1]: 'kzc,18' In [2]: '{},{}'.form ...

  2. 一个设置为display:none;的div,在用.height()方法获取不到它的高,获取到的高度为0.

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

  3. CVE-2012-1876漏洞分析

    0.POC文件 <html> <body> <table style="table-layout:fixed" > <col id=&qu ...

  4. IE7、IE8下使用escape、encodeURI传递中文参数乱码的问题及解决方案

    js跳转到指定页面,一旦escape()中文数据,浏览器就会终止和没有反应.上网搜了半天始终不得解.一种说法是,escape中文之后,url中出现了%u,IE7和IE8拒绝执行.目前看来差不多是这样的 ...

  5. Tornado入门资料整理

    预备知识 没学过计网的苦逼找点现成一些的东西看吧…… <Restful Web Services>,<HTTP The Definitive Guide>,各种RFC WSGI ...

  6. Java 中可变参数

    可变参数 Java 中可变参数 现在需要编写一个求和的功能,但是不知道有几个参数,在调用的时候才知道有几个参数,请问这如何实现呢? Java 给我们提供了一个 JDK 1.5 的新特性---可变参数 ...

  7. zabbix安装配置(2.4.5)

    这是第一次安装配置,直接遭遇配置文件不明晰的大坑,因在编译阶段未指明配置文件路径,导致zabbix_server启动时直接读取默认的 /usr/local/zabbix/etc/zabbix_serv ...

  8. zTree通过指定ID找到节点并选中

    zTree = $.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的div var node = zTree.getNo ...

  9. set集合玩法、三目运算

    set是无序的,无法用下标获取值 创建set二种方式 1.第一种 s1=set()   #创建一个空的set,看下面就知道为什么要这么创建一个空的集合 2.第二种 s2={11,22,33,44} # ...

  10. Codeforces 372 B. Counting Rectangles is Fun

    $ >Codeforces \space 372 B.  Counting Rectangles is Fun<$ 题目大意 : 给出一个 \(n \times m\) 的 \(01\) ...