代码之家 › 专栏 › 技术社区 › Shan-Desai askovpen

解析typescript的另一个私有方法中函数内的私有方法调用的范围

typescript angular

0

Shan-Desai askovpen · 技术社区 · 7 年前

框架: 角度5.x

结构如下:

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
}

我想是因为 function 在 ngAfterViewInit() 组件类的作用域混乱,并且 this 无法识别。

我怎么打电话 makeJsonBackEnd() 在 dblclick() ?

我试着做 dblclick 类的私有方法,但 这 内部呼叫 d3.select(this) 不会被认出来的

2 回复 | 直到 7 年前

1

Maryannah 7 年前

使用闭包。

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
}

2

1

ngChaitanya 7 年前

您可以尝试将dblclick方法转换为如下箭头函数

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

或者传统的将这个范围保持在局部var中的方法。 let me = this ,并使用 me.makeJsonBackEnd(d) 如下所示

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