Angular2 EventEmitter
可能你对EventEmitter还不太熟悉,不过别担心,它并不难。
EventEmitter只是一个帮你实现观察者模式①的对象。也就是说,它是一个管理一系列订阅者并向其发布事件的对象。就是这么简单。
来看一个使用EventEmitter的简单小例子:
let ee = new EventEmitter();
ee.subscribe((name: string) => console.log(`Hello ${name}`));
ee.emit("Nate");
// -> "Hello Nate"
当我们把一个EventEmitter赋值给一个输出的时候, Angular会自动帮我们订阅事件。我们不需要自己订阅。(当然,如果需要,你仍然可以实现自己的订阅逻辑。)
下面是一段具有outputs的组件示例代码:
@Component({
selector: 'single-component',
outputs: ['putRingOnIt'],
template: `
<button (click)="liked()">Like it?</button>
`
})
class SingleComponent {
putRingOnIt: EventEmitter<string>;
constructor() {
this.putRingOnIt = new EventEmitter();
}
liked(): void {
this.putRingOnIt.emit("oh oh oh");
}
}
可以看到我们做了完整的三步动作:(1) 指定outputs配置项;(2) 创建一个EventEmitter并把它赋值给我们指定的输出属性putRingOnIt;(3) 当liked方法被调用时,触发这个事件。
如果希望在一个父级组件中使用这个输出,可以这样做:
@Component({
selector: 'club',
template: `
<div>
<single-component
(putRingOnIt)="ringWasPlaced($event)"
></single-component>
</div>
`
})
class ClubComponent {
ringWasPlaced(message: string) {
console.log(`Put your hands up: ${message}`);
}
}
// logged -> "Put your hands up: oh oh oh"
再来回顾一下:
- putRingOnIt是在SingleComponent的outputs配置项中定义的;
- ringWasPlaced是ClubComponent中的一个方法;
- $event包含被触发事件参数(输出的内容),在这个例子中是一个字符串。
摘自:《Angular权威教程》第78页
Angular2 EventEmitter的更多相关文章
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
- [转]angular2之@Output() EventEmitter
本文转自:https://www.jianshu.com/p/f2768f927c86 A src/app/components/contains/contain1.ts import { Compo ...
- Angular2开发笔记
Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- “英雄之旅”见闻和小结----angular2系列(三)
前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的 ...
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- Angular2经典文章集锦
Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angul ...
- angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
随机推荐
- 编译安装centos6.9 php7.0 mysql5.6 nginx1.8
2018年3月15日 11:41:40 注意文章时效! 此文章不是给新用户参考的,没有每一步的操作,请注意! yum -y groupinstall "Development Tools&q ...
- Compile pam with pam_cracklib.so
pam_cracklib.so is dependent on libcrack.so. Configure command will search libcrack.so. If it didn't ...
- HTML轮播图实现(前后端分离)
1,首先前后端分离用到了3个插件 2,异步请求后端获取数据库图片地址(图片名字) //图片轮播 axios({ url:'http://127.0.0.1:8000/userctrl/image', ...
- phpstorm 破解版
原链接https://blog.csdn.net/gu_wen_jie/article/details/79136475
- JAVA:IDEA使用Hibernate(2)
1.打开IDEA新建项目 勾选Hibernate.勾选下方生成相关配置和类 下方选择Download,如果使用本地已经下载的包则选择 Use Library ,路径选到包里面的require里导入即可 ...
- linux的查找命令 find whereis locate
Linux 有三个查找文件的命令:find, whereis, locate 其中find 不常用,whereis与locate经常使用,因为find命令速度较慢,因为whereis与locate是利 ...
- ZooKeeper是什么
ZooKeeper概念 相信大家对 ZooKeeper 应该不算陌生,但是你真的了解 ZooKeeper 是什么吗?如果别人/面试官让你讲讲 ZooKeeper 是什么,你能回答到哪个地步呢? 本人曾 ...
- poj 1164 深度优先搜索模板题
#include<iostream> //用栈进行的解决: #include<cstdio> #include<algorithm> #include<cst ...
- 读取excel日期数据问题
1.企业导入数据,遇到日期数据, excel中显示日期格式正常 2009/3/13, 结果利用npoi读出来的竟然是 13-3月-2009,特别奇葩. so把excel中的日期数据统一成文本.利用Te ...
- sourcetree 免注册
http://www.cnblogs.com/xiofee/p/sourcetree_pass_initialization_setup.htmlSourceTree 安装之后需要使用账号登陆以授权, ...