2017-08-30 3 views
0

Ich habe eine Komponente, die ein Verhalten Betreff im ngOnInit Lebenszyklus abonniert hat. Diese Komponente html verwendet ngIf, um zu sehen, ob Daten vorhanden sind, bevor die Tabelle gerendert wird.Abbrechen/Schließen eines Verhaltensthemas in Winkel

Wenn ich von der Seite weg navigiere, möchte ich sicherstellen, dass die Tabelle beim nächsten Mal nicht sichtbar ist, bis diese Daten erneut abgerufen werden. Die einzige Art, wie ich in der Lage gewesen, dies zu tun, so ist bei weitem nächsten zu dem Thema aufrufen und einen leeren String zu senden, die falsch anfühlt ..

Komponente:

mapMetaData: any; 

ngOnInit() { 

    // Subscribe to our map data 
    this._mapsService.uiMapMetaData 
    .subscribe(
     results => { 
      if (results) { 
       this.mapMetaData = results; 
      } 
     } 
    ); 

} 

/** 
* Implement onDestroy life cycle 
* 
* @memberof ViewMapComponent 
*/ 
ngOnDestroy() { 
    this._mapsService.updateMapMetaData(''); 
} 

HTML:

<span *ngIf="mapMetaData"> 
    <div class="page-header"> 
     <h3 class="text-primary">{{ mapMetaData.TargetName }} <small>{{ mapMetaData.TargetDesc }}</small> 
      <button type="button" class="btn btn-default btn-sm pull-right" role="button" (click)="backToMaps()"> 
       <i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Back to Maps 
      </button> 
     </h3> 
    </div> 
    <app-map-versions [targetID]="targetID"></app-map-versions> 
    <app-map-exceptions [targetID]="targetID"></app-map-exceptions> 
    <app-map-rules></app-map-rules> 
</span> 

Das Problem ist, ohne die leeren next unterliegt das Verhalten sendet, enthält mapMetaData noch, was es von den vorherigenerhaltenAnruf, was in der Tabelle zeigt, wenn ich zurückkomme, alte Daten enthalten, und dann sehr schnell ändern, wenn neue Daten empfangen werden.

Gibt es einen besseren Weg, damit umzugehen oder mache ich es richtig?

+0

Haben Sie versucht, nur 'Subject' anstelle von' BehaviorSubject' zu verwenden? 'BehaviorSubject' speichert den letzten Wert, aber Subject speichert nicht den letzten Wert. – asmmahmud

+0

Sie könnten einen Resolver im Router verwenden, um sicherzustellen, dass die neuen Daten geladen werden, bevor die Navigation endet. – jonrsharpe

+0

@asmehmmud Ist es mein Abonnement, das ist das Problem obwohl? Technisch gesehen ist die Variable, die ich in der Komponente definiere, was den Wert bekommt und wenn das nicht gelöscht wird, wird es immer noch dazu führen, dass der 'ngIf' denkt, dass es Daten gibt und zeige das Element, richtig? – SBB

Antwort

2

Sie asObservable() verwenden können Observable von Ihnen BehaviorSubject und speichern Sie das Abonnement-Objekt zu erhalten und ngOnDestroy Sie können unsubscribe:

In Sie mapServie Klasse:

private mapSubject = new BehaviorSubject<any>(mapdata()); /* you get the idea */ 
public mapObservable = this.mapSubject .asObservable(); 

Dann können Sie folgendes tun:

mapMetaData: any; 
subscription: Subscription; 
ngOnInit() { 

    this.subscription = this._mapsService.uiMapMetaData 
    .subscribe(
     results => { 
      if (results) { 
       this.mapMetaData = results; 
      } 
     } 
    ); 

} 
ngOnDestroy() { 
    this.subscription.unsubscribe(); 
} 
Verwandte Themen