angular2组件通信
父到子
父组件:
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组件通信的更多相关文章
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- angular2+ 组件间通信
angular2+ 不同于react的redux,vue的vuex,angular2+其实可实现数据状态管理的方法很多,以下方案一般也足够支撑普通业务: 父子组件通信 1.1 父组件向子组件传递信息( ...
- angular2 组件交互
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- angular5 组件通信(一)
用了两年angular1,对1的组件通信比较熟练,最直接的就是直接使用scope的父子节点scope就可以实现,且基本都是基于作用域实现的通信:还有就是emit,broadcast,on这几个东西了. ...
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- vue.js入门(3)——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- Intent进行组件通信的一些体会
Intent进行组件通信的原理 l Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...
随机推荐
- Java Tuple使用实例(转)
转自链接:http://www.cnblogs.com/davidwang456/p/4514659.html 一.为什么使用元组tuple? 元组和列表list一样,都可能用于数据存储,包含多个数据 ...
- POJ 2513 Colored Sticks(Tire+欧拉回(通)路判断)
题目链接:http://poj.org/problem?id=2513 题目大意:你有好多根棍子,这些棍子的两端分都别涂了一种颜色.请问你手中的这些棍子能否互相拼接,从而形成一条直线呢? 两根棍子只有 ...
- email的传输协议与格式(资源链接)
以下链接为转载. 传输协议: 发:SMTP 收:POP3, IMAP 格式: MIME
- 【Mac】appium的环境搭建
1.下载appium并安装,进入官网下载即可 http://appium.io 2.下载安装pip,因为pip执行命令的安装,会出现某些包的下载失败,因此使用brew进行 https://pypi.o ...
- python3环境下面bytes类型转换成字典类型实例
场景:通过http://tool.chinaz.com/tools/httptest.aspx在线HTTP接口测试工具获取接口的返回信息 { "status": 0, " ...
- Nginx 详细安装部署教程
一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载N ...
- PBR Step by Step(二)辐射度
转载请注明出处:http://www.cnblogs.com/jerrycg/p/4929119.html 基于物理的渲染要尽量遵循能量守恒原则,主要的测量单位为辐射度. 辐射能Radiant en ...
- SpringBoot学习(七)
静态资源处理 spring Boot 默认的处理方式就已经足够了,默认情况下Spring Boot 使用WebMvcAutoConfiguration中配置的各种属性. 建议使用Spring Boot ...
- Vue 2.0学习(三)指令与事件
指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v- ...
- 【LYOI 212】「雅礼集训 2017 Day8」价(二分匹配+最大权闭合子图)
「雅礼集训 2017 Day8」价 内存限制: 512 MiB时间限制: 1000 ms 输入文件: z.in输出文件: z.out [分析] 蛤?一开始看错题了,但是也没有改,因为不会做. 一开 ...