我应该何时存储Subscription实例并unsubscribe()在NgOnDestroy生命周期中调用,何时可以忽略它们?
保存所有订阅会在组件代码中引入很多混乱.
HTTP客户端指南忽略这样的订阅:
getHeroes() {
this.heroService.getHeroes()
.subscribe(
heroes => this.heroes = heroes,
error => this.errorMessage = <any>error);
}
Run Code Online (Sandbox Code Playgroud)
同时," 航线与导航指南"说:
最终,我们会在其他地方导航.路由器将从DOM中删除此组件并将其销毁.在此之前我们需要自己清理.具体来说,我们必须在Angular破坏组件之前取消订阅.如果不这样做可能会造成内存泄漏.
我们取消订阅我们
Observable的ngOnDestroy方法.
private sub: any;
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
let id = +params['id']; // (+) converts string 'id' to a number
this.service.getHero(id).then(hero => this.hero = hero);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
Run Code Online (Sandbox Code Playgroud) subscription observable rxjs angular angular-component-life-cycle
我有一个服务和一个使用它的组件:
PagesServicePagesListComponent在PagesService我有一个数组Pages.我通过BehaviorSubject订阅它们的数据来通知数组中的更改.
将PagesService在提供bootstrap,到只有一个实例共享.那是因为我需要保留数组,而不是每次需要时都下载页面.
代码如下:
pages.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';
import { Http, Response } from '@angular/http';
import { Page } from './../models/page';
@Injectable() export class PagesService {
public pages$: BehaviorSubject<Page[]> = new BehaviorSubject<Page[]>([]);
private pages: Page[] = [];
constructor(private http: Http) { }
getPagesListener() {
return this.pages$;
}
getAll() {
this.http.get('/mockups/pages.json').map((res: Response) => res.json()).subscribe(
res => { this.resetPagesFromJson(res); },
err …Run Code Online (Sandbox Code Playgroud) 在我的角度应用程序中,我创建了一个Observable来为多个组件提供数据更新。当用户单击按钮时,应使用不同的数据集更新所有可观察对象的订户。下面是代码。
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
export class MyService {
private data: number[] = [5,6,7,8];
/// The observable given to outside
private observable: Observable<number[]>;
/// Subscribers of the observable which is given to outside
private subscribers: Map<number, Subscriber<number[]>>;
private nextSubscriberId = 0;
constructor() {
this.subscribers = new Map();
this.observable = new Observable(subscriber => {
const id = ++this.nextSubscriberId;
this.subscribers.set(id, subscriber);
subscriber.next(data);
return () => { this.subscribers.delete(id); };
});
}
Run Code Online (Sandbox Code Playgroud)
}
在按钮单击事件中,我执行以下操作
data = …Run Code Online (Sandbox Code Playgroud) angular ×3
rxjs ×2
angular-component-life-cycle ×1
observable ×1
rxjs5 ×1
subscription ×1
typescript ×1