2016-06-28 5 views
12

मैं एक सेवा है और एक घटक यह का उपयोग करता है। मैं BehaviorSubject के माध्यम से सरणी में परिवर्तनों को सूचित करता हूं, जिनमें से दोनों की सदस्यता ली गई है।ObjectUnsubscribedError जब सदस्यता लेने रोकने का प्रयास कर दो बार

PagesServicebootstrap पर प्रदान किया गया है, केवल एक उदाहरण साझा करने के लिए। ऐसा इसलिए है क्योंकि मुझे हर बार पृष्ठों को डाउनलोड करने की बजाय सरणी को रखने की आवश्यकता होती है।

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.component.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(); 
    } 
} 

यह ठीक पहली बार काम करता है, दोनों:

कोड पीछा कर रहा है Destroy पर Init और de unsubscription पर सदस्यता। लेकिन जब मैं सूची में वापस आ जाता हूं और फिर से सदस्यता लेने की कोशिश करता हूं (पृष्ठों के वर्तमान मूल्य को लाने के लिए [] और भविष्य के परिवर्तनों को सुनता हूं), यह त्रुटिEXCEPTION: ObjectUnsubscribedError त्रुटि को सक्रिय करता है।

यदि मैं सदस्यता समाप्त नहीं करता हूं, हर बार जब मैं सूची में प्रवेश करता हूं, तो एक नई सदस्यता रुक जाती है, और अगली() प्राप्त होने पर उनमें से सभी को निकाल दिया जाता है।

उत्तर

30

मैं सदस्यता सीधे विषय पर नहीं मिलता है और उस पर इस तरह से सदस्यता समाप्त होता है और:

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(); // <------- 
} 
+3

क्या आप उल्लेख कर सकते हैं कि सीधे इंजेक्शन विषय संदर्भ पर सदस्यता छोड़ने का काम क्यों नहीं किया गया? –

5

.subscribe() एक सदस्यता

  • आप इस का उपयोग करना चाहिए
  • सदस्यता समाप्त करने देता है


उदाहरण अभिभावक के पास एक पुनः लोड किया गया है विषय: विषय;

  • child1 -> सब्सक्राइब

child1 - - "काम करता है" -> सदस्यता समाप्त की उसकी सदस्यता

ngOnInit{ 
    sub: Subscription = parent.subscribe(); 
} 
onDestroy{ 
    this.sub.unsubscribe(); 
} 


child2 - "नहीं काम करता है">

  • child2 सब्सक्राइब - > सदस्यता समाप्त करने वाले पूरे माता-पिता

    ngOnInit{ 
        parent.subscribe(); 
    } 
    
    onDestroy{ 
        parent.unsubscribe(); 
    } 
    

    यदि आप माता-पिता पर सदस्यता समाप्त करते हैं तो दोनों बच्चे चले गए हैं।
    यदि आप सदस्यता से सदस्यता लेते हैं जो आप से प्राप्त करते हैं।सदस्यता लें() तो केवल एक ही बच्चा सदस्यता समाप्त कर दिया गया है।

    अगर मैं गलत हूं तो कृपया मुझे सही करें!

  • संबंधित मुद्दे