The idea is when we tape the arrow keys on the keyboard, we want the ball move accodingly.

  1. const leftArrow$ = Observable.fromEvent(document, 'keydown')
  2. .filter(event => event.key === 'ArrowLeft')
  3. .mapTo(position => this.increment(position, 'x', ));
  4. const rightArrow$ = Observable.fromEvent(document, 'keydown')
  5. .filter(event => event.key === 'ArrowRight')
  6. .mapTo(position => this.decrement(position, 'x', ));
  7. const upArrow$ = Observable.fromEvent(document, 'keydown')
  8. .filter(event => event.key === 'ArrowUp')
  9. .mapTo(position => this.increment(position, 'y', ));
  10. const downArrow$ = Observable.fromEvent(document, 'keydown')
  11. .filter(event => event.key === 'ArrowDown')
  12. .mapTo(position => this.decrement(position, 'y', ));
  1. increment(obj, prop, value) {
  2. return Object.assign({}, obj, {[prop]: obj[prop] + value});
  3. }
  4.  
  5. decrement(obj, prop, value) {
  6. return Object.assign({}, obj, {[prop]: obj[prop] - value});
  7. }
  1. Observable.merge(leftArrow$, rightArrow$, downArrow$, upArrow$)
  2. .startWith({
  3. x: ,
  4. y:
  5. })
  6. .scan((acc, curr) => curr(acc))
  7. .subscribe(
  8. p => this.position = p
  9. )

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的更多相关文章

  1. React报错之map() is not a function

    正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用ma ...

  2. 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 ...

  3. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  4. 使用highmaps制作中国地图

    Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...

  5. svg文件使用highmap显示

    svg文件使用highmap显示 highmap,ammap都是比较好的第三方插件用来显示svg图片:     ammap导航可能更美观点(这个highmap后面可能也会赶上),     highma ...

  6. angular2环境搭建

    Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...

  7. Google Map 自定义 infowindow

    最近做的东西用到了infowindow,不过google提供的样式太难看了,于是想改变一下样式.看了一下好像infowindow的样式不太好改. 查了半天资料,看到一个infobox,感觉真的挺好用. ...

  8. 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 ...

  9. 【原创】backbone1.1.0源码解析之Events

    最近在看些node的源代码,发现backbone的应用还是挺广泛的,但是之前的学习忘得一干二净了,后悔当时没做笔记啊. 所以,无奈想用的更好,就是得把源代码看楚,所以还是把源代码的注释笔记留下来,供自 ...

随机推荐

  1. hdu1874 畅通project续 最短路 floyd或dijkstra或spfa

    Problem Description 某省自从实行了非常多年的畅通project计划后.最终修建了非常多路.只是路多了也不好,每次要从一个城镇到还有一个城镇时,都有很多种道路方案能够选择.而某些方案 ...

  2. 50行python代码实现个代理server(你懂的)

    之前遇到一个场景是这种: 我在自己的电脑上须要用mongodb图形client,可是mongodb的server地址没有对外网开放,仅仅能通过先登录主机A,然后再从A连接mongodbserverB. ...

  3. thinkphp事务处理以及无效时的解决方案(整理)

    thinkphp事务处理以及无效时的解决方案(整理) 一.总结 一句话总结:要程序里面支持事务,首先连接的数据库和数据表必须支持事务 mysql 1.InnoDB和MyISAM对事务的支持怎么样? I ...

  4. 洛谷P2660 zzc 种田

    题目背景 可能以后 zzc就去种田了. 题目描述 田地是一个巨大的矩形,然而zzc 每次只能种一个正方形,而每种一个正方形时zzc所花的体力值是正方形的周长,种过的田不可以再种,zzc很懒还要节约体力 ...

  5. tab标签页(选项卡)插件

    <body style="margin: 50px;"> <ul id="nav" class="nav nav-tabs" ...

  6. python绘图问题

    论文绘图整理 # coding: utf-8 #来源:https://blog.csdn.net/A_Z666666/article/details/81165123 import matplotli ...

  7. 【Java】Java Socket 通信演示样例

    用socket(套接字)实现client与服务端的通信. 这里举两个样例: 第一种是每次client发送一个数据,服务端就做一个应答. (也就是要轮流发) 另外一种是client能够连续的向服务端发数 ...

  8. Java exception handling best practices--转载

    原文地址:http://howtodoinjava.com/2013/04/04/java-exception-handling-best-practices/ This post is anothe ...

  9. iOS_06_基本运算符

    一.算术运算 c语言一共有34种运算符,包括了常见的加减乘除 1.加法运算+ # 除了能做加法运算,还能表示正号:+5.+90 2.减法运算- # 除了能做减法运算,还能表示符号:-10.-200 3 ...

  10. 资源下载https://msdn.itellyou.cn/

    资源下载https://msdn.itellyou.cn/  迅雷