[Angular 2] Passing Template Input Values to Reducers

时间：2022-12-12 07:05:23

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)

            })

    }

}

相关文章