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. Swift - 09 - Optionals

    //: Playground - noun: a place where people can play import UIKit // swift中没有被赋值的变量是不能被使用的 //var str ...

  2. PHP MySQL 插入多条数据

    PHP MySQL 插入多条数据 使用 MySQLi 和 PDO 向 MySQL 插入多条数据 mysqli_multi_query() 函数可用来执行多条SQL语句. 以下实例向 "MyG ...

  3. Hibernate 性能优化之抓取策略

    fetch 抓取策略 前提条件:必须是一个对象操作其关联对象. 1. 根据一的一方加载多的一方,在一的一方集合中,有三个值:join/select/subselect 2.根据多的一方加载一的一方, ...

  4. DOM4J 读取XML配置文件进行数据库连接

        介绍介绍DOM4J.    据说是非常优秀非常优秀的Java XML  API(Dom4j is an easy to use, open source library for working ...

  5. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  6. 动态内存分配(new)和释放(delete)

    在之前我们所写过的程序中,所必需的内存空间的大小都是在程序执行之前就已经确定了.但如果我们需要内存大小为一个变量,其数值只有在程序运行时 (runtime)才能确定,例如有些情况下我们需要根据用户输入 ...

  7. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  8. 如何在C#添加鼠标右键菜单

    C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...

  9. PHP自定义错误处理

    自定义错误报告的处理方式,可以完全绕过标准的PHP错误处理函数,这样就可以按照自己定义的格式打印错误报告,或改变错误报告打印的位置(标准PHP的错误报告是哪里发生错误就在发生位置处显示).以下几种情况 ...

  10. PHP mysql 删除表中所有数据只保留一条

    DELETE FROM `logs` WHERE wangzhi='www.juhutang.com' and id<>101072; 上面这段代码的意思为 删除表logs中 所有字段wa ...