2016-12-08 4 views
1

Ich habe ein allgemeines Verständnis der Funktionsweise von Angular2/RXJS Observablen, wenn sie abonniert sind, aber ich mache einen Fehler irgendwo.Angular2 Component Abonnement falsche Implementierung

In meinem Dienst Ich habe eine beobachtbare verfügbar wie so:

// Source 
    private objectDetailsCache = new Subject<ObectDetails>(); 
    // Stream 
    public objectDetails$ = this.objectDetailsCache.asObservable().cache(); 

Der Dienst manipuliert die beobachtbaren mit diesen Methoden:

updateObject(object: ObjectDetails): Observable<ObjectDetails> { 

    let objectMapped = this.mappingService.mapObjectDetailsToObject(object); 

    this._HTTPService.update(this._objectUrl + object.id, objectMapped) 
     .subscribe(o => { 
      this.objectDetailsCache.next(o); 
     }); 
    return this.objectDetails$.last(); 
    } 

    getObjectDetails(id: number): Observable<ObjectDetails> { 
    this._HTTPService.get(this._objectUrl + id + '/details') 
     .subscribe(o => { 
      this.objectDetailsCache.next(o); 
     }) 
    return this.objectDetails$.last(); 
    } 

ich eine übergeordnete Komponente haben, die auf die beobachtbaren und Spuren abonniert die von seinen Kindern vorgenommenen Änderungen

constructor(private objectService: ObjectService) { 
    objectService.objectDetails$.subscribe(o => this.object = o); 
} 

Dann die co mponent erzählt die App, die es widersprechen will Beobachtung:

ngOnInit() { 
     this.loadObjectDetails(); 
    } 

    loadObjectDetails() { 
     this.sub = this.route.params.subscribe(params => { 
      let id = +params['id']; 
      this.objectService.getObjectDetails(id) 
       .subscribe(
       o => { }, 
       error => { }); 
     }); 
    } 

Dieses so weit alles in Ordnung ist. Das Problem kommt, wenn das Kind Komponenten der Objekt Eltern abonnieren beobachtbar:

ngOnInit() { 
     this.sub = this.objectService.objectDetails$.subscribe(
      o => { 
       this.object = o; 
       this.getHeaders() 
      } 
     ); 
    } 

    ngOnDestroy(){ 
     this.sub.unsubscribe(); 
    } 

Wenn die Eltern das Objekt ändert es beobachtet, wird das Kind mit jedem Objekt getroffen, die zuvor anstatt nur die letzten beobachtet wurde. In diesem Fall, wenn der Elternteil 3 Objekte beobachtet hat, wird this.getHeaders() 3 Mal aufgerufen, wenn das Kind subskribiert wird.

Ich habe versucht, die untergeordneten Methoden zum vollständigen Teil des Abonnements zu bewegen:

() => this.getHeaders() 

aber es wird nie getroffen.

Ich habe versucht, die Eltern-Abonnement in ngOnInit() und Abbestellen in ngDestroy(), aber es abonniert nichts dergleichen.

Irgendwelche Vorschläge darüber, wie ich einstellen kann, wie ich darüber gehe, wären toll.

Ich hoffe, das macht Sinn, Danke im Voraus.

+0

Ich bin nicht sicher, der Wert ist da im Konstruktor oder ngInit .... Was ich getan habe, ist eine Methode GetMyObservable(), die Observable zurückgibt, und ich abonniere diese Methode .... klappt wunderbar. Ich weiß nicht, ob das dein Problem ist oder nicht. –

+0

danke für den Rat John, es scheint, als ob die Art, wie ich abonniere funktioniert, aber ich möchte eigentlich kein Abonnement. Ich denke, ich brauche etwas, um mir eine Momentaufnahme des Observablen zu geben, etwas wie. – Mark

Antwort

0

konnte ich rund um die Ausgabe von der RXJS Bibliothek BehviourSubject erhalten:

https://xgrommx.github.io/rx-book/content/subjects/behavior_subject/index.html

speziell die .getValue() Mitglied das letzte Objekt im beobachtbaren Stream zurück. Anstatt die untergeordneten Komponenten zu abonnieren, fragen sie einfach nach dem neuesten Wert. Auf diese Weise, wenn sie den beobachtbaren Dampf aktualisieren, recyceln sie sich nicht selbst.

Verwandte Themen