我有一个组件订阅了生命周期中的行为主题。这个组件html在呈现表之前使用ngOnInit
查看数据是否存在。
当我离开页面时,我想确保下次返回时,直到再次获取该数据时,表才可见。到目前为止,我唯一能做到这一点的方法是调用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> 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>
问题是,在不将空的
ngIf
发送到行为主题的情况下,next
仍然包含它从上一个mapMetaData
调用中接收到的内容,从而生成一个表,显示当我返回到它时,它包含旧数据,然后在接收到新数据时快速更改。有更好的方法来处理这个问题吗?还是我做得对?
最佳答案
您可以使用asObservable()
从您的Observable
获取BehaviorSubject
并存储订阅对象,您可以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();
}