web-dev-qa-db-ja.com

2回サブスクライブを防止しようとするとObjectUnsubscribedError

サービスとそれを使用するコンポーネントがあります。

  • PagesService
  • PagesListComponent

PagesServiceには、Pagesの配列があります。両方のサブスクライブされているBehaviorSubjectを介して配列の変更を通知します。

PagesServiceはbootstrapで提供され、1つのインスタンスのみが共有されます。それは、必要なたびにページをダウンロードするのではなく、配列を保持する必要があるためです。

コードは次のとおりです。

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

これは、サブスクリプションonInitおよびde unsubscription onDestroyの両方で初めて正常に機能します。しかし、リストに戻って（pages []の現在の値を取得し、将来の変更をリッスンするために）もう一度サブスクライブしようとすると、エラーが発生しますEXCEPTION: ObjectUnsubscribedError。

購読を解除しないと、リストに入力するたびに新しい購読がスタックされ、next（）が受信されたときにすべてが購読されます。

typescriptangularrxjsrxjs5
33
AlvYuste

私はサブスクリプションを取得し、サブジェクトを直接ではなく、この方法でサブスクリプションを解除します：

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(); // <-------
}
69
Thierry Templier

.subscribe（）はサブスクリプションを返します

  • これを使用して登録を解除する必要があります


例えば。親にはreloadSubject：Subjectがあります。

  • child1->サブスクライブ
  • child2->サブスクライブ

child1-"WORKS"->彼のサブスクリプションのサブスクリプションを解除する

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


child2-「機能しません」->サブスクライブ解除は親全体です

ngOnInit{ 
  parent.subscribe();
}

onDestroy{
  parent.unsubscribe();
}

親でunsubscribeを呼び出すと、両方の子がなくなります。
。

私が間違っている場合は私を修正してください！

11
WorstCoderEver