[Angular 2] Passing Template Input Values to Reducers-优快云博客

本文介绍如何使用 Angular2 创建一个实时更新的数字时钟组件。该组件通过输入框接收用户设定的时间增量，并利用 RxJS 的 Observable 和 Subject 来响应按钮点击事件及定时更新时钟显示。

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)
            })
    }
}