typescript - Hur man avbryter/stänger ett behavior subject i angular

Jag har en komponent som är prenumererad på ett beteendesubjekt i ngOnInit-livscykeln. Denna komponents HTML använder ngIf för att se om data finns innan tabellen renderas.

När jag navigerar bort från sidan vill jag försäkra mig om att tabellen inte är synlig nästa gång jag kommer tillbaka, förrän datan hämtas igen. Det enda sättet jag hittills har kunnat göra detta på är genom att kalla på next på subject och skicka en tom sträng, vilket känns fel..

Komponent:

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 }}
            <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>

Problemet är att utan att skicka det tomma next till beteendesubjektet, innehåller mapMetaData fortfarande det som mottogs från föregående next-anrop, vilket resulterar i att tabellen visar gamla data när jag kommer tillbaka till den, och sedan ändras mycket snabbt när nya data tas emot.

Finns det ett bättre sätt att hantera detta eller gör jag det rätt?

Svar #1

Du kan använda asObservable() för att få en Observable från din BehaviorSubject och lagra prenumerationsobjektet och i ngOnDestroy kan du unsubscribe :

I din mapServie-klass:

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

Då kan du göra följande:

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

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

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

Relaterade artiklar