[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的应用还是挺广泛的,但是之前的学习忘得一干二净了,后悔当时没做笔记啊. 所以,无奈想用的更好,就是得把源代码看楚,所以还是把源代码的注释笔记留下来,供自 ...
随机推荐
- JQuery DataTables 列自己定义数据类型排序
使用JQ DataTables 的时候.希望某列数据能够进行自己定义排序.操作例如以下:(以中文排序和百分比排序为例) 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt ...
- Non-resolvable parent POM for **: Could not find artifact **
注意查看这句: 原因是本地仓库缺少了easybuy-parent:pom:0.0.1-SNAPSHOT, 原来是忘记了将父工程打包到本地仓库 ,运行聚合工程前记得先将依赖的工程都先Maven inst ...
- (转)Tomcat目录结构
首先来了解一下Tomcat5.5的目录结构: /bin:存放windows或Linux平台上启动和关闭Tomcat的脚本文件 /conf:存放Tomcat服务器的各种全局配置文件,其中包括server ...
- Ubuntu系统简介
1.ubuntu 远程连接 需要开启ssh 服务 sudo apt-get install openssh-server service ssh start|stop|restart 2.查看Linu ...
- pycharm 配置autopep8(亲测可行)
autopep8是一个可以将Python代码自动排版为PEP8风格第三方包,使用它可以轻松地排版出格式优美整齐的代码.网络上有很多介绍如何在pycharm中配置autopep8的方案,但很多方案中还是 ...
- 文档翻译第003篇:Process Monitor帮助文档(Part 3,附Process Monitor的简单演示)
[导入与导出配置] 一旦您配置了一个筛选器,您能够使用"工具(Tools)"菜单中的"保存筛选器(SaveFilters)"菜单项将其保存.Process Mo ...
- Linux常用运维命令小结
1. 空设备文件以及标准输入输出 /dev/null 表示空设备文件 0 表示stdin标准输入 1 表示stdout标准输出 2 表示stderr标准错误 2>&1 这里有两种解释:将 ...
- input表单验证(全面)
1.英文字母 1 <script type="text/javascript"> 2 //验证只能是字母 3 function checkZm(zm){ 4 var z ...
- CView::OnPreparePrinting
http://technet.microsoft.com/zh-cn/subscriptions/a59dff1e(v=vs.71).aspx CView::OnPreparePrinting Cal ...
- Java Web学习总结(13)——JSP入门
一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...