Question

框架： Angular 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作为课程的私有方法，但this内的d3.select(this)电话无法获得认可

Answer 1

使用闭包。

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

您可以尝试将dblclick方法转换为箭头功能，如下所示

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

或将此范围保存到本地var的传统方式。 let me = this，并使用me.makeJsonBackEnd(d)调用方法，如下所示

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

解析函数中的私有方法调用范围，用于打字稿的另一个私有方法

2 个答案: