Подтвердить что ты не робот

Сторонний JS в Angular2 typescript

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

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

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

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

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

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

Как я могу это сделать?

Ответ 1

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

Просто добавив определение typing для 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>