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
    * */
  • 相关阅读:
    OCP-1Z0-053-V12.02-69题
    OCP-1Z0-053-V12.02-170题
    OCP-1Z0-053-V12.02-117题
    OCP-1Z0-053-V12.02-222题
    OCP-1Z0-053-V12.02-528题
    OCP-1Z0-053-V12.02-531题
    OCP-1Z0-053-V12.02-532题
    OCP-1Z0-053-V12.02-533题
    OCP-1Z0-053-V12.02-542题
    OCP-1Z0-053-V12.02-68题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5437366.html
Copyright © 2011-2022 走看看