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

[Angular 2] Managing State in RxJS with StartWith and Scan的更多相关文章

  1. [Angular 2] Using ngrx/store and Reducers for Angular 2 Application State

    ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an eas ...

  2. Angular Multiple HTTP Requests with RxJS

    原文:https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs ----------------------------- ...

  3. [Hapi.js] Managing State with Cookies

    hapi has built-in support for parsing cookies from a request headers, and writing cookies to a respo ...

  4. [RxJS] Updating Data with Scan

    You often need to update the data flowing through the stream with custom logic based on what you nee ...

  5. [AngularJS] Isolate State Mutations in Angular Components

    Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem ...

  6. RxJS之组合操作符 ( Angular环境 )

    一 merge操作符 把多个 Observables 的值混合到一个 Observable 中 import { Component, OnInit } from '@angular/core'; i ...

  7. Angular快速学习笔记(4) -- Observable与RxJS

    介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持在应用中的发布者和订阅者之间传递消息. 可观察对象可以发送多个任意类型的值 -- 字面量.消息.事件. 基 ...

  8. [Angular] Refactor Angular Component State Logic into Directives

    Allow the base toggle to be a tag (<toggle>) or attribute (<div toggle>). The <toggle ...

  9. [Angular2 Form] Use RxJS Streams with Angular 2 Forms

    Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of t ...

随机推荐

  1. SQL DMO のDMV

    这两天对公司的一个项目进行优化,看着长长的SQL,脑袋不经有些大,一时间竟然不知道如何下手,一顿手忙脚乱后,小有成效,响应速度快了不少,同样的条件下可以做到秒级响应.闲暇时间想了想,还是得做点功课,最 ...

  2. 配置中的address不能重复

    <jaxws:endpoint  implementor="com.service.imp.UserServiceImpl" address="/user" ...

  3. crud的意识

    CRUD说的就是增查改删C:Create 增加对应CREATE TBL ...: ADD TBL IN (...) VALUES (...)R:Retrieve查询SELECT * from TBLU ...

  4. 《CSS那些事儿》读书笔记

    注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多 ...

  5. PHP搜索Solr文档(含高亮)

    <?php $options = array ( 'hostname' => 'localhost', 'port' => '8080', 'path' => 'solr/he ...

  6. .net别样外观控件包DotNetBar

    内容介绍:http://www.componentcn.com/?thread-6423-1.html BubbleBar应用: BubbleBar, DevComponents.    Namesp ...

  7. wamp环境网站根目录更改

    1.修改wampserver的默认目录 安装好wampserver后,网站根目录默认为:安装目录\wamp\www,也就是wampserver安装目录下的www文件夹. 我们以更改为:D\www为例. ...

  8. C# 取小数点

    1.Math.Round(0.333333,2);//按照四舍五入的国际标准2. double dbdata=0.335333; string str1=String.Format("{0: ...

  9. centos和Ubuntu区别

    centos中新建的非root用户是没有sudo的权限的,如果需要使用sudo权限必须在/etc/sudoers 中加入账户和权限,所以切换到root账号的时候只需要输入:su,加入root账号的密码 ...

  10. Scheme是什么、怎么自定义Scheme、JLRoutes的使用-备

    转到移动端开发后居然现在才用到Scheme真是惭愧惭愧. URL Scheme是什么 相信大家都知道URL. http://www.apple.com就是一个URL. 而://之前的部分就称为Sche ...