由于订阅问题，Angular API被多次调用

Question

我有两个仪表板组件。t和myapplication.ts。它们之间没有任何关系。

仪表板有一个弹出窗口，在这个弹出窗口中选择一个值，必须在myapplication组件中进行更改(调用API)。为此，我创建了一个服务并添加了主题(也尝试了行为主题)。

问题是我在myapplication组件的ngOnInit()中订阅主题，现在用户可以再次使用弹出式功能更改值。很明显，myapplication。它的组件没有被销毁，所以当用户执行此活动时，订阅正在增加(意味着API被调用两次，三次，…基于此活动发生的次数)。API调用被调用了两次，三次…还有一些电话也被取消了。

我试图在ngOnInit()钩子结束时取消订阅，它确实取消订阅，但是当用户在弹出窗口中进行更改时，在这个myapplication中什么都没有发生。ts组件。

Dashboard.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);
}
}

Answer 1

使用RXJS运算符，问题就解决了。

例如在

之前加上这个

.pipe(first())
.subscribe

所以它只会给你第一个发出的值或者如果你得到的值是固定的那么你可以使用skip来跳过操作符