在打字稿的另一个私有方法中解决函数内私有方法调用的范围

Question

Framework: Angular 5.x

Structure is as follows:

ngAfterViewInit() {
   // ... Some svg rendering code
   function dblclick(d) {
       d3.select(this).select('circle').transition()
         .duration(1000)
         .attr('r', 14);

       this.makeJsonBackEnd(d); // in the browser console this is not a function error
   }
}

makeJsonBackEnd(node) {
 // extract info from d3 node to make a JSON for backend
}

I think because of the function within the ngAfterViewInit() the scope of the Component class is messed up and this is not recognized.

How can I call makeJsonBackEnd() within the dblclick() ?

I tried making dblclick a private method for the class but the this call within d3.select(this) won't get recognized

Answer 1

Use a closure.

ngAfterViewInit() {
   const self = this;
   // ... Some svg rendering code
   function dblclick(d) {
       d3.select(this).select('circle').transition()
         .duration(1000)
         .attr('r', 14);

       self.makeJsonBackEnd(d); // in the browser console this is not a function error
   }
}

makeJsonBackEnd(node) {
 // extract info from d3 node to make a JSON for backend
}

Answer 2

You could try turning dblclick method into Arrow function like below

dblclick = d => { .... };

or the traditional way of holding this scope into local var. let me = this , and call the method with me.makeJsonBackEnd(d) like below

ngAfterViewInit() {
    let me = this;
    function dblclick(d) {
        ...
        me.makeJsonBackEnd(d)
        ...
    }
 }