[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="">
<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的更多相关文章
- [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 ...
- [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 ...
- [Angular 2] Passing data to components with 'properties'
Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...
- [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 ...
- [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 ...
- [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 ...
- [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. ...
- Angular: 使用 RxJS Observables 来实现简易版的无限滚动加载指令
我使用 angular-cli 来搭建项目. ng new infinite-scroller-poc --style=scss 项目生成好后,进入 infinite-scroller-poc 目录下 ...
- [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 ...
随机推荐
- Swift - 12 - 区间运算符和for-in
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- ReactNative for Android入坑(一)
最近找工作发现有些公司要求会ReactNative,决定入坑. 搭建环境:官网详细的教程附链接. 坑一:FQ,建议整个搭建过程中FQ.(FQ链接,注册有200M试用流量,环境搭建够了)第一步:安装Ch ...
- Skew Join与Left Semi Join相关
Skew Join 真实数据中数据倾斜是一定的, hadoop 中默认是使用 hive.exec.reducers.bytes.per.reducer = 1000000000 也就是每个节点的red ...
- jquery find选择器在不同浏览器下的差异
初步测试,5000个节点的隐藏. 代码如下: <!doctype html> <html lang="en"> <head> <scrip ...
- linux ulimit的使用,如何产生core文件,调试段错误
---恢复内容开始--- 下面先简单介绍下ulimit命令: 1. limit -a 可以查看系统各种资源的限制,如: core文件大小,数据段的大小等. $ ulimit -a core file ...
- bash shell学习-shell script基础 (笔记)
A chain no stronger than its weakest link. "一着不慎,满盘皆输" 参考资料:鸟哥的Linux私房菜 基础学习篇(第三版) Linux ...
- div(固定宽度和不固定宽度)居中显示的方法总结
今天我总结一下css实现div居中的方法,有的是固定宽度的,还有的是不固定宽度的. 1.使用自动外边距实现DIV CSS居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的mar ...
- jquery animate函数实现
jquery animate 函数 实现动画效果 参数一 比如高度宽度 之类的:'-=50' 参数二 速度之类 <html xmlns="http://www.w3.org/1999/ ...
- jquery如何判断滚动条滚到页面底部并执行事件
首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- Uva 120 - Stacks of Flapjacks(构造法)
UVA - 120 Stacks of Flapjacks Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld &a ...