zoukankan      html  css  js  c++  java
  • [Angular 2] Passing Observables into Components with Async Pipe

    The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a Component.

    The idea is Your smart component prepares the data and use 'async pipe' to pass into the dumb component to display. So the dump component has no idea about Observable. Just need to display the data.

    // clock.ts
    
    
    import {Component, Input} from 'angular2/core';
    @Component({
        selector: 'clock',
        template: `<h3>{{time | date:'yMMMMEEEEdjms'}}</h3>`
    })
    
    export class ClockComponent{
        @Input() time;
        constructor(){
            
        }
    }
    // app.ts
    
    /**
     * 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';
    import {ClockComponent} from './clock';
    
    @Component({
        selector: 'app',
        directives: [ClockComponent],
        template: `
            <input #inputNum type="number" value="0">
            <button (click)="click$.next(inputNum.value)">Update</button>
            <clock [time]="time | async"></clock> 
            `
    })
    export class App {
        click$ = new Subject()
                .map( (number) => ({type: HOUR, payload: parseInt(number)}));
    
        seconds$ = Observable.interval(1000)
            .mapTo({type: SECOND, payload: 1});
    
        time;
    
        constructor(store:Store) {
            this.time = store.select('clock');
    
    
            Observable.merge(
                this.click$,
                this.seconds$
                )
                .subscribe(store.dispatch.bind(store))
        }
    }

    Here using 'store.dipatch.bind(store)' instead of 'function(action){store.dispatch(action)}'.

    // reducer.ts
    
    export const SECOND = "SECOND";
    export const HOUR = "HOUR";
    
    export const clock = (state = new Date(), {type, payload})=> {
        const date = new Date(state.getTime());
        switch(type){
            case SECOND:
                date.setSeconds(date.getSeconds() + payload);
                return date;
    
            case HOUR:
                date.setHours(date.getHours() + payload);
                return date;
    
        }
    
        return state;
    };
    // main.ts
    
    import {bootstrap} from 'angular2/platform/browser';
    import {App} from './app';
    import {provideStore} from '@ngrx/store';
    import {clock} from './reducer';
    
    bootstrap(App, [
        provideStore({clock})
    ]).then(
        ()=> console.log('App running...'),
        err=> console.log(err)
    );
    
    /*
    *  1. Create a reducer
    *  2. Use provideStore({reducer_name}) to provide store
    *  3. Use store.select('reducer_name') to get store in Observable type
    *  4. Apply logic to dispatch the action
    * */
  • 相关阅读:
    shell test -n -z
    java -d64
    shell export
    topngroupcollector
    stat 查看文件修改时间
    随机30道小学计算题02(修改)
    设计四则运算2程序单元测试用例
    学习进度02
    随机30道小学计算题02
    随机30道小学计算题01
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5437366.html
Copyright © 2011-2022 走看看