Сторонний JS в Angular2 машинописных текстах

Question

Я новичок в угловом и машинописном, поэтому это, вероятно, действительно базовый.

Я пытаюсь сделать компонент угловой2 с диаграммой (используя Chart.js) в шаблоне.

Я понимаю, что существует chart directive, который специально использует Chart.JS, но я хотел бы понять, как это сделать, поскольку он, несомненно, появится в экземпляре, где директива недоступна.

До сих пор я пытался сделать эту простую вещь в шаблоне:

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

Но Javascript даже не запускается, когда шаблон был загружен angular2.

Как бы я это сделал?

Answer 1

Хорошо - с помощью @Pogrindis Я думаю, что нашел удобное, не слишком сложное решение.

Просто добавив определение набора текста для chart.js из here и ссылаться на него в пользовательской директивы я, наконец, это:

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>