在调用者 scope Typescript 中调用回调 function

Question

I have an Angular component which have a class consisting of common services and functions. I am passing some functions as callback while executing them in I am loosing the scope. Below by code I demonstrate the problem

@Component({
...
})
export class MyComponent implements OnInit { 
   constructor(private mycommon: MycommonService){}

   private refreshList(){
     console.log("refreshing UI")
   }

   private successCB(data){
     console.log("log success cb:",data);
     console.log("this", this)   //<<<<< ISSUE this is of `MycommonService`
     this.refreshList()  //<<<

     //More Logic and code here ...
   }

   private errorCB(data){
     console.log("log error cb:",data);
   }
       
   //Some user button Action
   update(){
      this.mycommon.saveData("someData", successCB, errorCB)
   }
}



@Injectable()
export class MycommonService {
  public updateAddress(ev: string,successCb: (val: any) => void, errorCb: (val: any) => void) {

    this.http.get(url).subscribe(response => {
      // calling a callback function with data(argument)
       successCb.bind(this)('List retrieved');
    });
  }
}

In Success callback function, how to have a this... Without passing this 'ref' or 'self'

Answer 1

So, while doing some test I found that while passing a callback function We need to bind this, otherwise this within the callback will point to the caller.

update(){
  this.mycommon.saveData("someData", this.successCB.bind(this), this.errorCB.bind(this))
}