zoukankan      html  css  js  c++  java
  • [Angular 2] Mapping Streams to Values to Affect State

    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);
  • 相关阅读:
    Spring AOP概念理解 (通俗易懂)
    分享一下几个关于ssm及spring原理的专栏链接
    liux高级常用命令
    Linux基础常用命令
    SP1716 GSS3
    HDU6579 Operation
    CF1205C Palindromic Paths
    CF1213G Path Queries
    CF1213F Unstable String Sort
    CF1213E Two Small Strings
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5436090.html
Copyright © 2011-2022 走看看