[Angular 2] Passing Template Input Values to Reducers
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的更多相关文章
- [Angular 2] Passing Observables into Components with Async Pipe
The components inside of your container components can easily accept Observables. You simply define ...
- MyBatis(3.2.3) - Passing multiple input parameters
MyBatis's mapped statements have the parameterType attribute to specify the type of input parameter. ...
- [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 ...
- [Angular] Test component template
Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...
- [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 ...
- [Angular 2] Passing data to components with 'properties'
Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...
- [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 ...
- 解决angular ui-grid 中添加input date修改日期
需求:在angular ui-grid列表中添加一个日期组件来修改时间. 在angular ui-grid添加了一个html5 date input,后端返回的数据是YYYY-MM-DD,比如:201 ...
- angular学习笔记(四)- input元素的ng-model属性
input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head> < ...
随机推荐
- 开源的Android开发框架-------PowerFramework使用心得(一)总体介绍
PowerFramework是一款几乎囊括了所有Android基础功能的框架应用,这个框架目前是开源的,开发者可以在这个框架的基础上进行二次开发.结合开发者自己的UI设计,可以很快就能开发出具备基础应 ...
- Android开发手记(23) Notification
有时候,我们需要应用程序在状态内显示一些通知信息,这时我们就需要使用Notification来完成这一工作.也许我们会想到以前经常使用的Toast来通知用户.虽然Notification与Toast都 ...
- NPOI对excel文件的导入导出
现理解:将一个Excel文件(工作簿-IWorkBook)看做是一个你要操作的对象,每个工作簿包含多个工作表(ISheet)对象,每个工作表中又包含多个行对象(IRow),每行又包含多个单元格(ICe ...
- 使用Cxf发布Webservice服务,如果待发布的接口中有重载方法,怎么处理??
使用 @WebMethod(operationName="multiParamByName") 重新指定名字. http://bbs.csdn.net/topics/270059 ...
- iOS9升级后第三方平台无法分享的问题
最近升级到了Xcode7,在真机调试中发现在初始化微博SDK时程序Crash. 解决办法从微博官网下一个最新的SDK,替换掉工程中的即可. 2.替换微博最新SDK之后成功运行程序,之后发现微信.QQ. ...
- android 05
控件:RadioButton CheckedBox RatingBar ProgressBar 下拉列表:ListView Spinner <!-- 单选按钮必须放在单选按钮组当中才能生效 ,并 ...
- jquery find选择器在不同浏览器下的差异
初步测试,5000个节点的隐藏. 代码如下: <!doctype html> <html lang="en"> <head> <scrip ...
- 由问题引出的fsck命令
博客停了两天,今天打开linux虚拟机,突然间报错了,顿时心中一喜(是吗?),当时看了下错误说明,好像有关于时间的问题(某个时间是未来时间)..然后我就去兴匆匆的修改系统时间,重启...唉,没作用.只 ...
- centos git 升级应用
在阿里云服务器上部署Git 升级centos 自带的Git yum库自带版本为git1.7.1-3.el6_4.1. -------------------升级-------------------- ...
- python模块中的特殊变量
37.模块的特殊变量: 显示模块中的变量 import s1 print(vars(s1)) 1.__doc__:打印注释信息. #!/usr/bin/env python # _ ...