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的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
随机推荐
- Luogu 1031 - 均分纸牌 - [有意思的思维题]
题目链接:https://www.luogu.org/problemnew/show/P1031 题目描述有 $N$ 堆纸牌,编号分别为 $1,2,…,N$.每堆上有若干张,但纸牌总数必为 $N$ 的 ...
- DELPHI中完成端口(IOCP)的简单分析(2)
DELPHI中完成端口(IOCP)的简单分析(2) 今天我写一下关于DELPHI编写完成端口(IOCP)的工作者线程中的东西.希望各位能提出批评意见.上次我写了关于常见IOCP的代码,对于IOCP ...
- Ubuntu 使用命令行连接无线网
一.查看可以使用的无线网: nmcli dev wifi 二.连接无线网: nmcli dev wifi connect ‘essid’(网络名称) password ‘password’(密码) 可 ...
- python摸爬滚打之day26----网络编程之socket
1.网络通信原理 互联网的本质就是一系列的网络协议, 统称为互联网协议. 互联网协议的功能:定义计算机如何接入internet,以及接入internet的计算机通信的标准. 互联网协议按照功能不同分为 ...
- 使用hashlib进行文件校验
import hashlib import os path = r'D:\CentOS 64 位' def file_md5(path): """ 文件校验 :param ...
- debian使用nginx创建静态文件存储
vim /etc/nginx/sites-available/default 在server下添加 location ~ .*\.(gif|jpg|jpeg|png)$ { expires 24h; ...
- axios跨域请求报错
在nodejs的入口js中的配置路由之前加入这一段就可以了 app.all('*', function(req, res, next) { res.header("Access-Contro ...
- Linux 安装python3.7.0
我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...
- mongodb删除重复数据
注:mongodb当前版本是3.4.3 插入六条数据: 查询存在重复的数据: 查询并循环删除重复数据: 删除语句解析: db.userInfo.aggregate([ { ...
- group_concat的使用
1.场景 仓库使用系统实现了先进先出,给仓库的备货单原先设计如下模式: tx3表: 不同的批次分开行显示,仓库从这个备货单可以知道这个货品需要备货哪些批次,多少数量 用了几天,仓库对此备货单样式提出如 ...