Angular 2 的 highcharts - 在 ChartComponent 上找不到指令注释

Question

我正在尝试获取 Angular 2 的 highcharts 以用于我的项目。但是，当我将CHART_DIRECTIVES 添加到@Component 中的directives 数组时，我的浏览器控制台中出现错误：

异常：错误：未捕获（承诺中）：在 ChartComponent 上找不到指令注释

有谁知道这意味着什么以及如何解决这个问题？？

编辑： 我正在尝试合并此图表包：https://www.npmjs.com/package/angular2-highcharts。我按照该网站上的说明添加了 CHART_DIRECTIVES：

import {Http, Headers, Response, HTTP_PROVIDERS} from 'angular2/http';
import {Component, Injectable} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';
import {Observable} from 'rxjs/Rx';
import {Routes} from '../routes.config';

import { CHART_DIRECTIVES } from 'angular2-highcharts';

@Component({
    selector: 'home',
    templateUrl: './app/home/home.html',
    directives: [CHART_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
    providers: [
        HTTP_PROVIDERS
    ]
})

Answer 1

我也面临同样的问题。我能够通过升级我的应用程序以使用 angular2 的最新 RC 版本来解决它。

angular2-highcharts 的最新版本 0.1.0 现已升级为 rc.1（RC 版）。

我认为这是一个兼容性问题，即使您导入 Component 注释是从角度库导入的，它也无法识别它。您正在尝试使用较旧的 angular2 版本，而我们使用的 angular2-highcharts 是基于 angular2 的最新版本，其中有很多重大更改。

更改日志： https://github.com/angular/angular/blob/master/CHANGELOG.md

/// <reference path="../../../../node_modules/angular2/typings/browser.d.ts" />

import {Component} from '@angular/core';
import {CHART_DIRECTIVES} from 'angular2-highcharts';

@Component({
    selector: 'simple-chart',
    directives: [CHART_DIRECTIVES],
    templateUrl: 'templates/simple_chart.html'
})
export class SimpleChart {
    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: Object;
}

Answer 2

根据您的用例，您似乎没有添加import {CHART_DIRECTIVES} from './ng2-charts.ts'; 在你的 .ts 文件中 imorting 图表时这一行。

除此之外，如果你打算在 angular2 中使用图表，你可以参考这里

• Chart.js not showing in Angular2 if it doesn't exist on the main page

• Chart is not working in Angular2

Working Example