Trzecia strona JS w Angular2 maszynopis

Question

Jestem nowy w kanciastych i maszynopisach, więc jest to prawdopodobnie bardzo podstawowe.

Próbuję utworzyć komponent kątowy2 za pomocą wykresu (za pomocą wykresu Chart.js) w szablonie.

Rozumiem, że opracowywany jest chart directive, który w szczególności wykorzystuje Chart.JS, ale chciałbym zrozumieć, jak to zrobić, ponieważ niewątpliwie pojawi się w przypadku, gdy dyrektywa nie jest dostępna.

Do tej pory próbowałem to zrobić prostą rzecz w szablonie:

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

Ale javascript nawet nie uruchomić, gdy szablon został załadowany przez angular2.

Co mam zrobić?

Answer 1

Okay - z pomocą @Pogrindis, wydaje mi się, że znalazłem użyteczne, niezbyt złożone rozwiązanie.

Poprzez dodanie definicji pisania dla chart.js od here i przedstawieniu go w dyrektywie niestandardowego końcu mam to:

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

i template.html:

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