サードパーティー製JS（Angular2タイプ）

Question

私は角度とタイプスクリプトに慣れていないので、これはおそらく基本的なものです。

私は、（Chart.jsを使用して）グラフでangle2コンポーネントをテンプレート内で作成しようとしています。

具体的にはChart.JSを使用しているchart directiveが開発されていますが、指示を使用できないインスタンスに間違いなく出てくるので、これを行う方法を理解したいと思います。これまでのところ、私はテンプレートにこの単純なことを行うことを試みてきました

：

<canvas id="chart"></canvas> 
<script> 
$(function() { 
//instantiate chart on $("#chart") 
}); 
</script> 

しかし、テンプレートがangular2によってロードされたときに、このジャバスクリプトも実行されません。

どうすればいいですか？

Answer 1

@Pogrindisの助けを借りて、私は、あまりにも複雑ではない、使いやすいソリューションを見つけたと思います。私は最終的に、この持っているだけでhereからchart.jsのためのタイピングの定義を追加し、カスタムディレクティブでそれを参照することにより

：

chart.directive.ts

/// <reference path="../../typings/chartjs/chart.d.ts" /> 

import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; 
@Directive({ 
    selector: '[chart]' 
}) 
export class ChartDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
     //el.nativeElement.style.backgroundColor = 'yellow'; 
     var data = { 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
      datasets: [ 
       { 
        label: "My First dataset", 
        fillColor: "rgba(220,220,220,0.2)", 
        strokeColor: "rgba(220,220,220,1)", 
        pointColor: "rgba(220,220,220,1)", 
        pointStrokeColor: "#fff", 
        pointHighlightFill: "#fff", 
        pointHighlightStroke: "rgba(220,220,220,1)", 
        data: [65, 59, 80, 81, 56, 55, 40] 
       }, 
       { 
        label: "My Second dataset", 
        fillColor: "rgba(151,187,205,0.2)", 
        strokeColor: "rgba(151,187,205,1)", 
        pointColor: "rgba(151,187,205,1)", 
        pointStrokeColor: "#fff", 
        pointHighlightFill: "#fff", 
        pointHighlightStroke: "rgba(151,187,205,1)", 
        data: [28, 48, 40, 19, 86, 27, 90] 
       } 
      ] 
     }; 
     var ctx: any = el.nativeElement.getContext("2d"); 
     var lineChart = new Chart(ctx); 
     ////var lineChartOptions = areaChartOptions; 
     ////lineChartOptions.datasetFill = false; 
     lineChart.Line(data); 
    } 
} 

app.component.tsを

import {Component} from 'angular2/core'; 
import {ChartDirective} from './chart.directive'; 

@Component({ 
    directives: [ChartDirective], 
    selector: 'chart-graph', 
    templateUrl: '/js/app/template.html' 
}) 

export class AppComponent { } 

とtemplate.html：

<canvas id="myChart" chart width="400" height="400"></canvas>