我有一个服务和一个使用它的组件:
页面服务
页面列表组件
在PagesService
中,我有一个Pages
数组。我通过它们都订阅的行为主题
通知数组中的更改。
PagesService
在bootstrap
中提供,只共享一个实例。那是因为我需要保留数组,而不是每次需要时都下载页面。
代码如下:
page. 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 => { console.log('Pages could not be fetched'); }
);
}
private resetPagesFromJson(pagesArr: Array<any>) {
// Parses de Array<any> and creates an Array<Page>
this.pages$.next(this.pages);
}
}
pages_list.组件. ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import { BehaviorSubject } from 'rxjs/Rx';
import { PagesService } from '../../shared/services/pages.service';
import { GoPage } from '../../shared/models/page';
@Component({
moduleId: module.id,
selector: 'go-pages-list',
templateUrl: 'pages_list.component.html',
styleUrls: ['pages_list.component.css']
})
export class PagesListComponent implements OnInit {
pages$: BehaviorSubject<GoPage[]>;
pages: GoPage[];
constructor(private pagesService: PagesService, private router: Router) { }
ngOnInit() {
this.pages$ = this.pagesService.getPagesListener();
this.pages$.subscribe((pages) => { this.pages = pages; console.log(pages) });
this.pagesService.getAll();
}
ngOnDestroy() {
this.pages$.unsubscribe();
}
}
这在第一次订阅onInit和取消订阅onDestroy时都很好。但是当我返回列表并尝试再次订阅(获取页面[]的当前值并监听未来的更改)时,它会触发错误例外:ObjectUn订阅错误
。
如果我不取消订阅,每次我进入列表时,都会堆叠一个新的订阅,当收到next()时,所有订阅都会被触发。
我会以这种方式获得订阅和取消订阅,而不是直接在主题上:
ngOnInit() {
this.pages$ = this.pagesService.getPagesListener();
this.subscription = this.pages$.subscribe((pages) => { // <-------
this.pages = pages; console.log(pages);
});
this.pagesService.getAll();
}
ngOnDestroy() {
this.subscription.unsubscribe(); // <-------
}
.订阅()返回一个订阅
例如父级有一个reload主题:主题;
儿童1-“作品”-
ngOnInit{
sub: Subscription = parent.subscribe();
}
onDestroy{
this.sub.unsubscribe();
}
child 2-"不起作用"-
ngOnInit{
parent.subscribe();
}
onDestroy{
parent.unsubscribe();
}
如果您在父级上调用取消订阅,则两个孩子都消失了。
如果您取消订阅从.订阅()获得的订阅,则只有一个孩子被取消订阅。
如果我错了,请指正!