码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular 2] Passing Template Input Values to Reducers

时间:2016-04-27 06:55:27      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

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="0">
        <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(1000)
        .mapTo({type: SECOND, payload: 1});

    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

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5437352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!