2016-12-16 8 views
1

VisJS(http://visjs.org/)と呼ばれるグラフ作成ライブラリで適切なテストを行っています。私はそれをAngular2と統合しましたが、ネットワーク要素がクリックされたときにangular2コンポーネント関数を呼びたいと思います。ここでは、基本的なネットワーク図を作成し、私のコンポーネントは次のとおりです。VisJSからAngular2コンポーネント関数を呼び出す

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

//reference to visjs library 
declare var vis: any; 

@Component({ 
    selector: 'visjs', 
    templateUrl: './app/visJs/visjs.basic.html' 
}) 

export class VisJsBasicComponent implements OnInit { 

    @ViewChild('network') _element: ElementRef; 

    ngOnInit() { 

     this.createBasicNetwork(); 
    } 

    createBasicNetwork(): void{ 
     // create an array with nodes 
     var nodes = new vis.DataSet([ 
      { id: 1, label: 'Node 1' }, 
      { id: 2, label: 'Node 2' }, 
      { id: 3, label: 'Node 3' }, 
      { id: 4, label: 'Node 4' }, 
      { id: 5, label: 'Node 5' } 
     ]); 

     // create an array with edges 
     var edges = new vis.DataSet([ 
      { from: 3, to: 1 }, 
      { from: 1, to: 2 }, 
      { from: 2, to: 4 }, 
      { from: 2, to: 5 } 
     ]); 

     //create the network 
     var data = { 
      nodes: nodes, 
      edges: edges 
     }; 
     var options = {}; 
     var network = new vis.Network(this._element.nativeElement, data, options); 

     network.on("click", function (params) { 
      window.alert('onclick'); 
     }); 
    } 
} 

代わりの

network.on("click", function (params) { 
      window.alert('onclick'); 
     }); 

私は

network.on("click", function (params) { 
     this.myComponentFunction(params); 
    }); 

ような何かをしたいのですが、これはjqueryのメソッドでangular2混合されます...私はこれについてどうやって行くのですか?

答えて

0

私はこれにそれを変更:

var network = new vis.Network(this._element.nativeElement, data, options); 

network.on('click', (params) => { 
    if (params && params.nodes && params.nodes.length === 1) { 
     this.nodeClicked(params); 
    } else { 
     console.log('non node element clicked'); 
    } 
});  
} 

nodeClicked(params: any): void { 
    this._router.navigate(['/Node',params.nodes[0]]); 
} 

私は問題は方法がこのように見えたとき、ということだったと思う:

function (params) { 
      window.alert('onclick'); 
     } 

「この」キーワードは、内側の関数にスコープと私ましたコンポーネントメンバを参照できませんでした。

関連する問題