JS di terze parti in Angular2 typescript

Question

Sono nuovo di angolare e dattiloscritto, quindi questo è probabilmente davvero di base.

Sto provando a creare un componente angular2 con un grafico (utilizzando Chart.js) nel modello.

Mi rendo conto che è in fase di sviluppo uno chart directive che utilizza in modo specifico Chart.JS, ma vorrei capire come farlo, poiché verrà indubbiamente visualizzato in un'istanza in cui una direttiva non è disponibile.

Finora ho provato a fare questa cosa semplice nel modello:

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

Ma questo javascript non ha nemmeno eseguito quando il modello è stato caricato da angular2.

Come dovrei fare questo?

Answer 1

Okay - con l'aiuto di @Pogrindis penso di aver trovato una soluzione utilizzabile, non troppo complessa.

Semplicemente aggiungendo la definizione di digitazione per chart.js da here e riferimento in una direttiva personalizzato finalmente ho questo:

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 { } 

e template.html:

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