this.someFunction（params）はAngular 4の関数ではありません

Question

Angular 4アプリでd3.jsと作業しています。私は関数を呼び出そうとしていますが、それは私にERROR TypeError: this.highlightNodes is not a functionというエラーを投げます。

は、ここで私が働いていた、コードです：

import {Component, OnInit} from '@angular/core'; 

declare let d3:any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent implements OnInit { 

    ngOnInit() { 
    this.networkGraph(); 
    } 

    networkGraph() { 
    d3.netJsonGraph("../assets/json/network.json", 
     { 
     el: "#randomDiv", 
     onClickNode: function (url, opts) { 
      //Here's the error being thrown 
      this.highlightNodes(url, "nodes", true); 
     } 
     } 
    ); 
    } 

    highlightNodes(url, type, initial) { 
    console.log("Its working"); 
    } 
} 

それがローカルに結合されているため、bind(this)が支援していない使用します。関数を適切な方法で呼び出す方法としてこれを解決するのを手伝ってください。

Answer 1

これは、このケースでonClickNodeを指し、矢印の機能を使用します。あなたはfunctionキーワードを使用する場合

onClickNode: (url, opts) => { 
    //Here's the error being thrown 
    this.highlightNodes(url, "nodes", true); 
} 

Answer 2

使用矢印機能をコンテキストに

onClickNode: (url, opts) => { 
    this.highlightNodes(url, "nodes", true); 
} 

Answer 3

を維持するために、それはスコープを隠しますthis。代わりに矢印関数を使用してください。

は、この行を置き換えます

onClickNode: function (url, opts) { 

...これで：

onClickNode: (url, opts) => {