angular - 如何以 Angular 取消/关闭行为主题

Question

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

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

组件:

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>

问题是，如果不向行为主体发送空的 next，mapMetaData 仍然包含它从之前的 next 调用中收到的内容，导致当我返回时显示该表，其中包含旧数据，然后在收到新数据时很快发生变化。

是否有更好的方法来处理这个问题，或者我是否正确地处理了这个问题？

Answer 1

您可以使用 asObservable() 从您的 BehaviorSubject 获取一个 Observable 并存储订阅对象和 ngOnDestroy 你可以退订 :

在你的 mapServie 类中:

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

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

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

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

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