[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> < ...
随机推荐
- iOS使用阿里云OSS对象存储 (SDK 2.1.1)
最近项目中用到了阿里云OSS对象存储,用来存储APP中图片.音频等一些数据.但坑爹的阿里云居然在11月20日将SDK版本更新到了2.1.1,然而网上给出的教程都是1.*版本的(针对iOS),两个版本所 ...
- Ubuntu下管理员界面的切换
不同于redhat的Linux系统可以通过命令su root 简单地切换到管理员状态,ubuntn 默认是没有超级用户的,因此如需使用管理员权限可以使用以下2种方法: 1.sudo -i 此命令不需要 ...
- C#字符串string的常用使用方法
1--->字符串的声明: 1.string s=new string(char[] arr) //根据一个字符数组声明字符串,即将字符字组转化为字符串. 2.string s=new s ...
- createElement()结合appendChild()的实例
createElement()作用是在JavaScript中创建一个元素 appendChild()向html元素添加节点 下面是冲浪后改编的例子代码 先插html代码 <body> &l ...
- QT设置标签字体大小和颜色
ui.label是QLabel ui.label_4->setText("some text"); //设置字号 QFont ft; ft.setPointSize(12); ...
- The Managed Metadata Service or Connection is currently not available
Does the following error message looks familiar to you? when you go to site Actions -> Site Sett ...
- "类名.this"与"this"的区别
"this"是指(或者说:所代表的是)当前这段代码所在的类的对象.而"类名.this"是指"类名"的对象(一般在匿名类或内部类中使用来调用外 ...
- Solr4.8.0源码分析(17)之SolrCloud索引深入(4)
Solr4.8.0源码分析(17)之SolrCloud索引深入(4) 前面几节以add为例已经介绍了solrcloud索引链建索引的三步过程,delete以及deletebyquery跟add过程大同 ...
- Installshield更新时,新加dll未拷贝至安装目录问题完美解决【原创】
最近在发现在开发过程中新增的目录或文件(特别是dll\ocx\exe等二进制文件),在升级安装时拷贝失败. 经过一周的研究,完美解决办法: 对于新增的文件或目录,放到一个新的component中,并且 ...
- 【Git】Git远程操作详解
Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Gi ...