码迷,mamicode.com
首页 > Web开发 > 详细

[Angular 2] Managing State in RxJS with StartWith and Scan

时间:2016-04-26 07:06:42      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

The scan operator in RxJS is the main key to managing values and states in your stream. Scan behaves just as a reduce function would, but scan is able to collect values from streams over time. This lesson covers using startWith to set the initial accumulator value then using scan to update the value of the clock from the clicks and interval.

 

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),
            this.click$
        )
            .startWith(new Date())
            .scan( (acc: Date, curr) => {
                const date = new Date(acc.getTime());
                date.setSeconds(date.getSeconds() + 1);
                return date;
            });
    }
}

bootstrap(App);

 

[Angular 2] Managing State in RxJS with StartWith and Scan

标签:

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

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