Angular2 AsyncPipe
来源:互联网 发布:世界杯预选赛网络直播 编辑:程序博客网 时间:2024/06/03 06:57
今天我们来介绍一下 Angular 2 中 AsyncPipe (异步管道) ,使用 AsyncPipe 我们可以直接在模板中使用 Promise
和Observable
对象,而不用通过定义一个类的成员属性来存储返回的结果。使用async管道不需要再执行 可观察对象的 订阅 或是 promise的then来获取数据了,async自动调用相应的方法获取数据。
AsyncPipe 订阅一个 Observable 或 Promise 对象,并返回它发出的最新值。 当发出新值时,异步管道会主动调用变化检测器的 markForCheck()
方法,标识组件需执行变化检测。 当组件被销毁时,异步管道自动取消订阅,以避免潜在的内存泄漏。
使用 ?.
安全导航操作符,控制 name
属性的显示:
<span>{{ (hero$ | async)?.name }}</span>
AsyncPipe with Promise
Promise 未使用 AsyncPipe
promise.component.ts
import { Component } from '@angular/core';@Component({ selector: 'exe-promise', template: ` <h4>Promise Component</h4> <p>{{promiseData}}</p> `})export class PromiseComponent { promiseData: string; constructor() { this.getPromise().then(v => this.promiseData = v); } getPromise(): Promise<string> { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Promise complete!'); }, 2000); }); }}
app.component.ts
import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: ` <exe-promise></exe-promise> `})export class AppComponent { }
Promise 使用 AsyncPipe
promise-async-pipe.component.ts
import { Component } from '@angular/core';@Component({ selector: 'exe-promise-pipe', template: ` <h4>Promise with AsyncPipeComponent</h4> <p>{{ promise | async }}</p> `})export class PromiseAsyncPipeComponent { promise: Promise<string>; constructor() { this.promise = this.getPromise(); } getPromise(): Promise<string> { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Promise with AsyncPipe complete!'); }, 2000); }); }}
app.component.ts
import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: ` <exe-promise-pipe></exe-promise-pipe> `})export class AppComponent { }
AsyncPipe with Observables
Observable 未使用 AsyncPipe
observable.component.ts
import { Observable, Subscription } from 'rxjs/Rx';import { Component, OnDestroy } from '@angular/core';@Component({ selector: 'exe-observable', template: ` <h4>Observable Component</h4> <p>{{ observableData }}</p> `})export class ObservableComponent implements OnDestroy { observableData: number; subscription: Subscription = null; constructor() { this.subscribeObservable(); } getObservable(): Observable<number> { return Observable .interval(1000) // 每隔1秒,生成一个值 .take(10) // 获取前面10个数据 .map(v => v * v); // 对每个数据进行乘方处理 } subscribeObservable() { this.subscription = this.getObservable() .subscribe(v => this.observableData = v); } ngOnDestroy() { // 组件销毁时取消订阅,以避免潜在的内存泄漏 if (this.subscription) { this.subscription.unsubscribe(); } }}
app.component.ts
import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: ` <exe-observable></exe-observable> `})export class AppComponent { }
Observable 使用 AsyncPipe
observable-async-pipe.component.ts
import { Component } from '@angular/core';import { Observable } from 'rxjs/Rx';@Component({ selector: 'exe-observable-pipe', template: ` <h4>Observable with AsyncPipe Component</h4> <p>{{ observable | async }}</p> `})export class ObservableAsyncPipeComponent { observable: Observable<number> constructor() { this.observable = this.getObservable(); } getObservable(): Observable<number> { return Observable .interval(1000) .take(10) .map(v => v * v); }}
以上代码运行后能正常显示结果,但如果你切换到开发者工具的网络面板,你会发现发送了三个重复的请求。这是因为我们的 Observable 是 cold 的,每处使用 async 管道的地方都会执行一次。针对上述问题,大部分人推荐的解决方案如下:
this.http.get('https://jsonplaceholder.typicode.com/posts/1') .map(res => res.json()).share()我们使用 publishReplay 替换了 share 操作符。调用 publishReplay() 方法后将返回一个ConnectableObservable 对象,当你调用 connect() 方法的时候,将主动执行订阅操作。
在大多数情况下,我们只需要从服务器获取数据并显示数据。如果只是这样的话,我们可以使用 Promise 来修复 AsyncPipe 发送多次 HTTP 请求的问题:
this.person = this.http.get("https://jsonplaceholder.typicode.com/posts/1") .map(res => res.json()).toPromise()原文链接:https://segmentfault.com/a/1190000008759314
- Angular2 AsyncPipe
- angular2
- angular2
- Angular2
- angular2
- 【Angular】关于AsyncPipe你不知道的3件事!
- 【Angular2】新建Angular2项目
- Angular2 进阶
- Why Angular2
- Angular2 Routing
- angular2 Displaying
- angular2 组件
- Angular2 服务
- angular2 quickstart
- angular2资料
- Angular2学习指南
- Angular2-开始
- Angular2初探
- 学习PHP的一些浅谈
- 无法安装64位office,因为已有32位版本的完美解决方法
- Redis ACL之redis_set类分析介绍
- MailBee.NET Objects发送电子邮件(SMTP)教程一:使用SMTP服务器发送消息
- 我的安卓开发之路 2017.04.27
- Angular2 AsyncPipe
- hdu5371_Hotaru's problem_Manacher
- android屏幕适配详解
- 清除浮动的几种方法
- 【Linux】Ubuntu 查看系统位数以及内核版本
- sql学习笔记3--编辑数据
- 【ios】如何按照自定义类的对象的某个属性进行排序
- 项目-高并发系统三大利器
- Unity Scene场景自定义坐标轴