提问者:小点点

由于订阅问题,AngularAPI被多次调用


我有两个组件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);
    }
  }


共1个答案

匿名用户

使用RXJS运算符,您的问题将得到解决。

例如,在订阅之前添加这个

 .pipe(first())
  .subscribe

所以它只会给你第一个发出的值,或者如果你得到固定数量的值,那么你可以使用skip跳过运算符所需的值