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基础:变量类型 & 运算符
    Ant基础入门
    Shell基础:Shell和Mysql交互
    Linux配置邮箱发送(MUTT/MSMTPQ)
    [转载]JMeter源码导入Eclipse
    [转载]Badboy使用教程
    工程目录 Java/Web/Maven
    Maven基础知识和环境搭建
    Github/Eclipse管理Maven项目
    Git分支管理详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5437366.html
Copyright © 2011-2022 走看看