Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.

/**
* Created by wanzhen on 26.4.2016.
*/
import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/scan';
import 'rxjs/add/operator/mapTo';
import {Subject} from "rxjs/Subject";
import {Store} from '@ngrx/store';
import {SECOND, HOUR} from './reducer'; @Component({
selector: 'app',
template: `
<input #inputNum type="number" value="">
<button (click)="click$.next(inputNum.value)">Update</button>
<h1>{{clock | async | date:'yMMMMEEEEdjms'}}</h1>
`
})
export class App {
click$ = new Subject()
.map( (number) => ({type: HOUR, payload: parseInt(number)})); seconds$ = Observable.interval()
.mapTo({type: SECOND, payload: }); clock; constructor(store:Store) {
this.clock = store.select('clock'); Observable.merge(
this.click$,
this.seconds$
)
.subscribe((action)=>{
store.dispatch(action)
})
}
}

[Angular 2] Passing Template Input Values to Reducers的更多相关文章

  1. [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define ...

  2. MyBatis(3.2.3) - Passing multiple input parameters

    MyBatis's mapped statements have the parameterType attribute to specify the type of input parameter. ...

  3. [Angular 2] Passing data to components with @Input

    @Input allows you to pass data into your controller and templates through html and defining custom p ...

  4. [Angular] Test component template

    Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...

  5. [Angular 2] Create template with Params

    Angular 2 templates have a special let syntax that allows you to define and pass a context when they ...

  6. [Angular 2] Passing data to components with 'properties'

    Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...

  7. [Angular 2] Mapping Streams to Values to Affect State

    While you have multiple streams flowing into your scan operator, you'll need to map each stream to t ...

  8. 解决angular ui-grid 中添加input date修改日期

    需求:在angular ui-grid列表中添加一个日期组件来修改时间. 在angular ui-grid添加了一个html5 date input,后端返回的数据是YYYY-MM-DD,比如:201 ...

  9. angular学习笔记(四)- input元素的ng-model属性

    input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head> < ...

随机推荐

  1. 开源的Android开发框架-------PowerFramework使用心得(一)总体介绍

    PowerFramework是一款几乎囊括了所有Android基础功能的框架应用,这个框架目前是开源的,开发者可以在这个框架的基础上进行二次开发.结合开发者自己的UI设计,可以很快就能开发出具备基础应 ...

  2. Android开发手记(23) Notification

    有时候,我们需要应用程序在状态内显示一些通知信息,这时我们就需要使用Notification来完成这一工作.也许我们会想到以前经常使用的Toast来通知用户.虽然Notification与Toast都 ...

  3. NPOI对excel文件的导入导出

    现理解:将一个Excel文件(工作簿-IWorkBook)看做是一个你要操作的对象,每个工作簿包含多个工作表(ISheet)对象,每个工作表中又包含多个行对象(IRow),每行又包含多个单元格(ICe ...

  4. 使用Cxf发布Webservice服务,如果待发布的接口中有重载方法,怎么处理??

    使用 @WebMethod(operationName="multiParamByName")  重新指定名字. http://bbs.csdn.net/topics/270059 ...

  5. iOS9升级后第三方平台无法分享的问题

    最近升级到了Xcode7,在真机调试中发现在初始化微博SDK时程序Crash. 解决办法从微博官网下一个最新的SDK,替换掉工程中的即可. 2.替换微博最新SDK之后成功运行程序,之后发现微信.QQ. ...

  6. android 05

    控件:RadioButton CheckedBox RatingBar ProgressBar 下拉列表:ListView Spinner <!-- 单选按钮必须放在单选按钮组当中才能生效 ,并 ...

  7. jquery find选择器在不同浏览器下的差异

    初步测试,5000个节点的隐藏. 代码如下: <!doctype html> <html lang="en"> <head> <scrip ...

  8. 由问题引出的fsck命令

    博客停了两天,今天打开linux虚拟机,突然间报错了,顿时心中一喜(是吗?),当时看了下错误说明,好像有关于时间的问题(某个时间是未来时间)..然后我就去兴匆匆的修改系统时间,重启...唉,没作用.只 ...

  9. centos git 升级应用

    在阿里云服务器上部署Git 升级centos 自带的Git yum库自带版本为git1.7.1-3.el6_4.1. -------------------升级-------------------- ...

  10. python模块中的特殊变量

    37.模块的特殊变量:      显示模块中的变量 import s1 print(vars(s1))      1.__doc__:打印注释信息. #!/usr/bin/env python # _ ...