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
    * */
  • 相关阅读:
    常见中外出版社
    OpenCL编程基本流程及完整示例
    OpenCL基本概念
    matlab 高阶(三)—— 插值(fft、)
    matlab 高阶(三)—— 插值(fft、)
    matlab 小波处理工具箱
    matlab 小波处理工具箱
    小波图像处理 —— 奇异点(不连续点)检测
    (step6.1.5)hdu 1233(还是畅通工程——最小生成树)
    Android基础总结(精华完整版)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5437366.html
Copyright © 2011-2022 走看看