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的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
随机推荐
- 编译安装centos7 php7.2 mysql5.7 nginx1.9.9
2018年3月12日 14:09:39 注意时效 centos7 网卡 cd /etc/sysconfig/network-scripts/ TYPE=Ethernet PROXY_METHOD=no ...
- Robot Framework自动化测试Selenium2Library库详细用法
一.浏览器驱动 通过不同的浏览器执行脚本. Open Browser Htpp://www.xxx.com chrome 浏览器对应的关键字: firefox FireFox ff internete ...
- keras实现textcnn
https://github.com/MoyanZitto/keras-cn/blob/master/docs/legacy/blog/word_embedding.md 这个链接将带有embedin ...
- array 和 alloc init 以及 new 区别
当你使用new.alloc或copy方法创建一个对象时,该对象的引用计数器值为1.当不再使用该对象时,你要负责向该对象发送一条release或autorelease消息.这样,该对象将在其使用寿命结束 ...
- maven build resources
1.在我用springboot+mytatis时,生成完mapper后,然后访问网站总是报错 错误信息: Servlet.service() for servlet [dispatcherServle ...
- TCP/IP协议 模型
OSI的来源 OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互连模型. ISO为了更好的 ...
- docker centos 老是退出
1. 使用docker 镜像可以加快拉去.操作系统的使用第二种格式. 您可以使用以下命令直接从该镜像加速地址进行拉取: $ docker pull registry.docker-cn.com/myn ...
- JAVA:IDEA使用Junit(3)
1.配置 File ——> Project Structure ——> Libraries ——> + ——>搜索Junit类库 确认ok即可 2.编辑项目 选择创建 配置生成 ...
- Axis2的简单配置(完整版)
Axis2的简单配置(终结版) 1.axis2 下载地址 axis2-1.6.2-bin.zip http://mirror.esocc.com/apache//axis/axis2/java/cor ...
- CSS——对position定位和margin-top的理解
一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...