我有两个组件dashboard. ts和myapplication.ts。这些没有任何关系。
仪表板有一个弹出窗口,在这个弹出窗口中选择一个值时,必须改变myapplication组件(调用API)。为此,我创建了一个服务并添加了主题(也尝试了行为主题)。
问题是我在myapplication组件的ngOnInit()中订阅了主题,现在用户可以再次使用该弹出功能更改值。所以很明显,myapplication. ts组件没有被销毁,所以当用户执行此活动时,订阅会增加(意味着api被调用两次,三次,…基于此活动发生的次数)。API调用被调用两次,三次,…并且在某些调用中被取消。
我试图在ngOnInit()钩子的末尾取消订阅,它确实取消订阅,但用户在弹出窗口中进行更改时,此myapplication. ts组件中没有任何事情发生。
仪表板. ts
// this method is called when the pop-up is closed (it has the selected data's id/index)
toCheckForAvailability(id:any) {
if(isAvailable) {
this.add(id);
} else {
this.sharedService.changeEId(-1);
this.sharedService.changeName("hello test");
}
}
add(id:any) {
this.sharedService.changeEId(id);
this.sharedService.changeName("hello test");
//calling an api to add the data if on free trial routing to subscription and also updating the subscription observable
}
myapplication. ts
ngOnInit() {
this.subjectSubscription = this.sharedService.eIDChosen.subscribe(x => {
console.log("inside sub for essay id")
this.subjectSubscription = this.sharedService.cName.subscribe(x => this.Name = x);
if(x === -1) {
id= Details[index].id;
let sub_status = true;
this.subjectSubscription = this.sharedService.subscription.subscribe(x=> sub_status = x)
if( sub_status === 'true') {
console.log('inside befor api call')
this.subscription = this.http.postData('add', {eid:id}).pipe(take(1)).subscribe((res:any) => {
console.log('inside api calld')
if (res.success) {
this.toastr.success(res && res.message);
this.dashboard();
if(this.subscription) {
this.subscription.unsubscribe();
}
}
}, ({error}) => {
this.toastr.error(error && error.message);
if(error.data.reason === 'invalidPlan') {
this.router.navigate(['/subscription']);
this.sharedService.changeSubscriptionStatus(false);
if(this.subscription) {
this.subscription.unsubscribe();
}
}
});
}
}
})
}
Sharedservice. ts
export class SharedService {
public Json$ = new Subject<JSON>();
public editDataDetails: any = '' ;
public cID: any = 0;
public eID: any = 0;
public isValidSubscription = true;
public subject = new Subject<any>();
public cName = new Subject<any>();
public cIdChosen = new Subject<any>();
public eIDChosen = new Subject<any>();
public subscription = new Subject<any>();
//behaviour subject
// private cName = new BehaviorSubject(this.editDataDetails);
// private cIdChosen = new BehaviorSubject(this.cID);
// private eIDChosen = new BehaviorSubject(this.eID);
// private subscription = new BehaviorSubject(this.isValidSubscription);
currentMessage = this.cName.asObservable();
currentCSelected = this.cIdChosen.asObservable();
currEss = this.eIDChosen.asObservable();
currentSubscriptionStatus = this.subscription.asObservable();
changeId(val: Number) {
this.cIdChosen.next(val);
}
changeName(message: string) {
this.cName.next(message);
}
changeEId(id: Number) {
this.eIDChosen.next(id);
}
changeSubscriptionStatus(status: boolean) {
this.subscription.next(status)
}
changeCDetails(c_info:any) {
this.Json$.next(c_info);
}
}
使用RXJS运算符,您的问题将得到解决。
例如,在订阅之前添加这个
.pipe(first())
.subscribe
所以它只会给你第一个发出的值,或者如果你得到固定数量的值,那么你可以使用skip跳过运算符所需的值