[Angular 2] Handling Clicks and Intervals Together with Merge
2016-04-26 03:32
686 查看
Observable.merge allows you take two different source streams and use either one of them to make changes to the same state of your data. This lesson shows how you can use a stream of clicks and an interval stream and use either one to update the clock.
So the logic is both
every 5 seconds to update the clock
when click the button to update the clock
SO there use logic "OR" --> merge() to do that
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; import {Subject} from 'rxjs/Subject'; @Component({ selector: 'app', template: ` <button (click)="click$.next()">Update</button> <h1>{{clock | async | date: 'yMMMMEEEEdjms'}}</h1> ` }) class App { click$ = new Subject(); clock; constructor(){ this.clock = Observable.merge( Observable.interval(5000), this.click$ ).map( () => new Date()); } } bootstrap(App);
So the logic is both
every 5 seconds to update the clock
when click the button to update the clock
SO there use logic "OR" --> merge() to do that
相关文章推荐
- [Angular 2] Handling Click Events with Subjects
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
- [Angular 2] Rendering an Observable with the Async Pipe
- 学习AngularJs:Directive指令用法(完整版)
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- Part 20 Create custom service in AngularJS
- Part 19 AngularJS Services
- AngularJS快速入门
- [置顶] angularJS学习小结——ngRoute(路由机制)
- angular directive
- angularjs自定义指令(下)
- [Angularjs]ng-switch用法
- angularjs file upload插件使用总结
- angular 自定义filter
- angular自定义指令(中)
- angularJs学习资料
- angularJS实现textarea记录只能输入规定数量的字符并显示
- Angularjs中UI Router全攻略
- angularjs 上拉加载,下拉刷新数据功能
- angular api