首页 > 移动平台 > 详细

[Angular 2] Mapping Streams to Values to Affect State

时间:2016-04-26 19:19:37      阅读:270      评论:0      收藏:0      [点我收藏+]

While you have multiple streams flowing into your scan operator, you‘ll need to map each stream to the specific values you need to update your state the way that you want. This lesson covers using the map operator to determine what the click and interval should do when the state is updated.

 

import {Component} from angular2/core;
import {bootstrap} from angular2/platform/browser;
import {Observable} from rxjs/Observable;
import rxjs/add/observable/interval;
import rxjs/add/observable/merge;
import rxjs/add/operator/map;
import rxjs/add/operator/scan;
import rxjs/add/operator/startWith;
import {Subject} from rxjs/Subject;

@Component({
    selector: app,
    template: `
        <button (click)="click$.next()">Add one second</button>
        <h1>{{clock | async | date: yMMMMEEEEdjms}}</h1>
    `
})

class App {

    click$ = new Subject();
    clock;
    constructor(){

        this.clock = Observable.merge(
            Observable.interval(1000).mapTo(second),
            this.click$.mapTo(hour)
        )
            .startWith(new Date())
            .scan( (acc: Date, curr: string) => {
                // acc: new Date() passed from startWIth
                // curr: string, passed from mapTo
                console.log(acc, curr);
                const date: Date = new Date(acc.getTime());
                if(curr === "second"){
                    date.setSeconds(date.getSeconds() + 1);
                }

                if(curr === "hour"){
                    date.setHours(date.getHours() +1 );
                }

                return date;
            });
    }
}

bootstrap(App);

 

[Angular 2] Mapping Streams to Values to Affect State

原文:http://www.cnblogs.com/Answer1215/p/5436090.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!