[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 can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.
hero.component.html:
<div>
<h2>{{description}}: {{(hero | async)?.name}}</h2>
<div>
<a [routerLink]="['/heros', prev()]">Previous</a>
<a [routerLink]="['/heros', next()]">Next</a>
</div>
<div>
<input type="text" #inpRef (keyup.enter)="saveHero(inpRef.value)">
</div>
<br>
<img src="{{(hero | async)?.image}}" alt="">
<div>
<a [routerLink]="['/heros']">Back</a>
</div>
</div>
Here you can see, we use twice 'async' pipe, it means we subscribe the stream twice:
this.hero = this.route.params
.map((p:any) => {
this.editing = false;
this.heroId = p.id;
return p.id;
})
.switchMap( id => this.starwarService.getPersonDetail(id));
In network tab, we can see it calls '1' api twice.
To solve this problem, we can use 'BehaviorSubject' :
this.hero = new BehaviorSubject({name: 'Loading...', image: ''}) this.route.params
.map((p:any) => {
this.editing = false;
this.heroId = p.id;
return p.id;
})
.switchMap( id => this.starwarService.getPersonDetail(id))
.subscribe( this.hero);
This can solve problem, because we only have one subscription to the stream with HTTP get in it.
We do have two subscriptions to this contact here and here because a behavior subject is still an observable but it's not going to make two requests because now it's just observing what comes from the stream instead of basically invoking it twice. Because now we have one subscription to the stream with HTTP calling it being observed by something with two subscriptions on it.
See more: http://www.cnblogs.com/Answer1215/p/5784167.html
[Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects的更多相关文章
- [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] 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] Passing Observables into Components with Async Pipe
The components inside of your container components can easily accept Observables. You simply define ...
- [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 ...
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and Non ...
- [Angular 2] Using Array ...spread to enforce Pipe immutability
Pipes need a new reference or else they will not update their output. In this lesson you will use th ...
- [Angular 2] Handle Reactive Async opreations in Service
When you use ngrx/store and you want to fire a service request. When it sucessfully return the respo ...
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual ...
- [Angular 2] Async Http
Async Pipe: The Asynce pipe receive a Promise or Observable as input and subscribes to the input, e ...
随机推荐
- 开源框架DNN简介以及安装
donetnuke 是一款免费的开源cms框架,目前也有收费版,不过免费版也可以适应大家大部分的需求.我前些阵子是老板让我在20天内,做好一个官网并且发布,并且指定使用dnn这个框架,考虑到又可以学习 ...
- WS之cxf处理的复杂类型(Map)
一.服务端: 1.创建接口: package cn.tdtk.ws.dao; import java.util.List;import java.util.Map; import javax.jws. ...
- Hadoop2.3+Hive0.12集群部署
0 机器说明 IP Role 192.168.1.106 NameNode.DataNode.NodeManager.ResourceManager 192.168.1.107 Secondary ...
- Swift 脚本(运行时带参数)
#!/usr/bin/env xcrun swift import Foundation let args = Process.arguments print("Arg:\(args)&qu ...
- 《Java数据结构与算法》笔记-CH5-链表-2单链表,增加根据关键字查找和删除
/** * Link节点 有数据项和next指向下一个Link引用 */ class Link { private int iData;// 数据 private double dData;// 数据 ...
- 关于在 mac上配置pytesseract的相关问题
因为踩了两个小时坑 特别是在配置依赖tesseract-ORC识别库时候的问题 特别麻烦 一定要用brewhome 一定要用brewhome 一定要用brewhome 重要的事情说三遍. 刚开始我在网 ...
- 第三百三十天 how can I 坚持
今天是姥姥二周年,不是忘了,是根本就没不知道,没放在心上,正月十九,记下了,人这一辈子. 搞不懂,搞不懂那签. 锥地求泉,先难后易,顺其自然,偶遇知己,携手同行,是签文的关键,我逐个解释给你听.锥地求 ...
- python开发vim插件
[python开发vim插件] 按如下方式使用python开发vim插件,注意调用时使用的是exec. 但在函数中嵌入python代码更为简便,如下: python如何传递参数给python: 代码头 ...
- Cisco 防止SYN Flood 攻击原理
DoS(Denial of Service拒绝服务)和DDoS(Distributed Denial of Service分布式拒绝服务)攻击是大型网站和网络服务器的安全威胁之一.2000年2月,Ya ...
- [iOS微博项目 - 2.6] - 获取微博数据
github: https://github.com/hellovoidworld/HVWWeibo A.新浪获取微博API 1.读取微博API 2.“statuses/home_time ...