[Angular2] Map keyboards events to Function
The idea is when we tape the arrow keys on the keyboard, we want the ball move accodingly.
const leftArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowLeft')
.mapTo(position => this.increment(position, 'x', ));
const rightArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowRight')
.mapTo(position => this.decrement(position, 'x', ));
const upArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowUp')
.mapTo(position => this.increment(position, 'y', ));
const downArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowDown')
.mapTo(position => this.decrement(position, 'y', ));
increment(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] + value});
} decrement(obj, prop, value) {
return Object.assign({}, obj, {[prop]: obj[prop] - value});
}
Observable.merge(leftArrow$, rightArrow$, downArrow$, upArrow$)
.startWith({
x: ,
y:
})
.scan((acc, curr) => curr(acc))
.subscribe(
p => this.position = p
)
Here, 'curr' is the function return from 'mapTo', the 'acc' will remember the position return from the function.
The initial value of 'acc', is from startWith().
[Angular2] Map keyboards events to Function的更多相关文章
- React报错之map() is not a function
正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用ma ...
- Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined
错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...
- 如何使用highmaps制作中国地图
如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
- 使用highmaps制作中国地图
Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...
- svg文件使用highmap显示
svg文件使用highmap显示 highmap,ammap都是比较好的第三方插件用来显示svg图片: ammap导航可能更美观点(这个highmap后面可能也会赶上), highma ...
- angular2环境搭建
Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...
- Google Map 自定义 infowindow
最近做的东西用到了infowindow,不过google提供的样式太难看了,于是想改变一下样式.看了一下好像infowindow的样式不太好改. 查了半天资料,看到一个infobox,感觉真的挺好用. ...
- javascript google map circle radius_changed ,angularjs google map circle radius_changed
javascript: var cityCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, st ...
- 【原创】backbone1.1.0源码解析之Events
最近在看些node的源代码,发现backbone的应用还是挺广泛的,但是之前的学习忘得一干二净了,后悔当时没做笔记啊. 所以,无奈想用的更好,就是得把源代码看楚,所以还是把源代码的注释笔记留下来,供自 ...
随机推荐
- C++怎么访问私有变量和函数
用指针呀,了解C++内存结构的话. 1. 对于私有成员变量,可以用指针来访问. 2. 对于虚函数,也可以用指针来访问. 3. 另外,对于私有成员,如果摸不准地址构造,可以先构造一个结构相似的类,然后增 ...
- ThinkPad E431 获取无限网络的驱动
sudo apt-get install linux-headers-generic build-essential dkms sudo apt-get install linux-source ...
- POJ 3252 Round Numbers(组合数学)
Round Numbers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10223 Accepted: 3726 De ...
- hdoj 2122 Ice_cream’s world III【最小生成树】
Ice_cream's world III Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- js08--函数1
函数当成类看当成匿名对象看,都是跟java吻合的,只有当成函数看(函数自己可以执行)跟java区别在这里. function fact(){} var F = fact ; 函数名是函数对象的地址,是 ...
- 16.REPL 命令
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html ctrl + c - 退出当前终端. ctrl + c 按下两次 - 退出 Node REPL ...
- 11. Linux——LCD驱动程序
由上一节 得出写个LCD驱动入口函数,需要以下4步: 1) 分配一个fb_info结构体: framebuffer_alloc(); 2) 设置fb_info 3) 设置硬件相关的操作 4) 使能LC ...
- CISP/CISA 每日一题 14
CISA 每日一题(答) 自动无人值守运行(LIGHTS-OUT)优势:1.信息系统运行成本的遏制/减少:2.持续运行(24/7):3.减少系统错误和中断次数. I/O 控制人员负责保证:1.批处理信 ...
- 如何在同一台机器上安装多个MySQL的实例(转)
最近由于工作的需要,需要在同一台机器上搭建两个MySQL的实例,(注:已经存在了一个3306的MySQL的实例). 先说下,什么是mysql的多实例,简单的来说就是一台机器上安装了多个mysql的服务 ...
- mysql集群搭建教程-基础篇
计算机一级考试系统要用集群,目标是把集群搭建起来,保证一个库dang了,不会影响程序的运行.于是在孟海滨师哥的带领下开始了我的第一次搭建mysql集群,首先看了一些关于集群的资料,然后根 ...