如何取消/关闭行为主题 [英] How to cancel / close a behavior subject in angular

问题描述

我有一个组件已订阅ngOnInit生命周期中的行为主题.该组件html使用ngIf在呈现表之前查看数据是否存在.

I have a component that is subscribed to a behavior subject in the ngOnInit life cycle. This component html uses ngIf to see if data is there before rendering the table.

当我离开页面时，我想确保下次我回来时，该表不可见，直到再次获取该数据为止.到目前为止，我唯一能够做到这一点的方法是在主题上调用next并发送一个空字符串，这感觉很不正确.

When I navigate away from the page, I am wanting to make sure that the next time I come back, the table isn't visible until that data is then fetched again. The only way I have been able to do this so far is by calling next on the subject and sending an empty string, which feels wrong..

组件:

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>

问题在于，mapMetaData并未将空的next发送给行为主体，但仍然包含它从上一个next调用中收到的内容，从而导致该表显示了我何时返回到该表，其中包含了旧数据，然后在接收到新数据时很快进行更改.

The issue is, without sending the empty next to the behavior subject, mapMetaData still contains what it received from the previous next call, resulting in the table showing when I come back to it, containing old data, and then very quickly changing when new data is received.

有没有更好的方法来解决这个问题?或者我做得正确吗?

Is there a better way to handle this or am I doing it correctly?

推荐答案

您可以使用asObservable()从您的BehaviorSubject中获取Observable并存储订阅对象，而ngOnDestroy您可以unsubscribe:

You can use asObservable() to get a Observable from you BehaviorSubject and store the subscription object and ngOnDestroy you can unsubscribe :

在您的mapServie类中:

In you mapServie class:

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

然后您可以执行以下操作:

Then you can do the following:

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

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

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

这篇关于如何取消/关闭行为主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！