ObjectUnsubscribedError si vous souhaitez empêcher l'abonnement à deux reprises

J'ai un Service et une composante qui l'utilise:

  • PagesService
  • PagesListComponent

Dans le PagesService j'ai un tableau de Pages. Je notifier les modifications dans le tableau via un BehaviorSubject dont deux d'entre eux sont abonnés.

La PagesService sont fournis à bootstrap, d'avoir une seule instance partagée. C'est parce que j'ai besoin de garder le tableau, au lieu de télécharger les pages à chaque fois qu'ils sont nécessaires.

Le code est le suivant:

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 => { 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.composante.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();
    }
}

Cela fonctionne bien la première fois, l'abonnement onInit et de désabonnement onDestroy. Mais quand je retourne à la liste et essayez de vous inscrire à nouveau (pour récupérer la valeur actuelle de pages[] et écouter les évolutions futures), il les feux de l'erreur EXCEPTION: ObjectUnsubscribedError.

Si je ne vous désinscrire, à chaque fois que je rentre dans la liste, un nouvel abonnement est empilé, et tous sont déclenchés lors de la prochaine() est reçu.

InformationsquelleAutor AlvYuste | 2016-06-28