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="">
<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()
.mapTo({type: SECOND, payload: }); 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
* */

[Angular 2] Passing Observables into Components with Async Pipe的更多相关文章

  1. [Angular 2] Rendering an Observable with the Async Pipe

    Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson cover ...

  2. [Angular 2] Passing data to components with @Input

    @Input allows you to pass data into your controller and templates through html and defining custom p ...

  3. [Angular 2] Passing data to components with 'properties'

    Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...

  4. [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword

    Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...

  5. [Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

    Each time you use the Async Pipe, you create a new subscription to the stream in the template. This ...

  6. [Angular 2] Passing Template Input Values to Reducers

    Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...

  7. [Angular2 Router] Use Params from Angular 2 Routes Inside of Components

    Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. ...

  8. Angular: 使用 RxJS Observables 来实现简易版的无限滚动加载指令

    我使用 angular-cli 来搭建项目. ng new infinite-scroller-poc --style=scss 项目生成好后,进入 infinite-scroller-poc 目录下 ...

  9. [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

    The network may be unreliable and loading data may take time. Thus it is important to give the user ...

随机推荐

  1. 开源的Android开发框架-------PowerFramework使用心得(二)图片异步加载ImageTask

    图片异步加载.可以备注图片是否缓存.缓存状态. 1.缓存-SD卡,路径可设置 2.图片压缩 3.可加载本地和网络图片 4.url为本地视频文件可以显示缩略图 5.中文url图片地址FileNotFou ...

  2. Android开源项目 Universal imageloader 源码研究之Lru算法

    https://github.com/nostra13/Android-Universal-Image-Loader universal imageloader 源码研究之Lru算法 LRU - Le ...

  3. dbms_job dbms_scheduler简单比较

    ---------------------------陈旧的-------------------------------------/*--------------------- 创建job --- ...

  4. [转载] extern "C"的用法解析

    本文转载自: http://www.cnblogs.com/rollenholt/archive/2012/03/20/2409046.html   1.引言 C++语言的创建初衷是“a better ...

  5. 网易DBA私享会分享会笔记2

    mysql索引与查询优化什么是索引?索引其实是一个目录.通过各种数据结构实现,是(值=>行位置)的映射 索引的作用:1.提高访问速度2.实现主键.唯一键逻辑 索引使用场景数据量特别大的时候,进行 ...

  6. fedora 安装nginx+php+mysql

    环境 fedora 最新版 20 参考:http://www.cnblogs.com/beceo/archive/2012/08/21/2648378.html ------------------- ...

  7. redis 扩展安装使用

    Redis的php客户端库非常之多, Redis推荐客户端链接是:http://redis.io/clients 推荐用phpredis,下载地址:https://github.com/nicolas ...

  8. 【HDOJ】2772 Matchsticks

    纯粹的找规律题.1: 22: 53: 54: 45: 56: 67: 38: 79: 60: 6 2     1     13     7     74     4    115     2      ...

  9. loadrunner11 安装及破解教程来自百度文库

    http://wenku.baidu.com/link?url=wSdgdZPzSNkftIqPmuz2rLKJ0M7Q3RrfSEdqcoRzfVDMIikj_7OLmLZWgoCiBev3AxvN ...

  10. Java---多线程之死锁

    ★ 死锁的两种情况: 简单的说下单块cpu运行多线程的情况: 大家可能平时玩电脑,可以同时挂QQ啊,玩游戏啊,打开文本啊,等等.这里,我们假设是单块cpu.也就是俗称的单核cpu. 大家可能会觉得这些 ...