Question

我试图获得Angular 2的高级图表来处理我的项目。但是，当我将CHART_DIRECTIVES添加到directives中的@Component数组时，我在浏览器控制台中收到错误：

EXCEPTION：错误：未捕获（在承诺中）：在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

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

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

Working Example

Answer 2

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

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

我认为这是一个兼容性问题，即使您导入组件注释是从角度库导入的，但它无法识别它。您正在尝试使用较旧的 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;
}

Angular 2的高级图表 - 在ChartComponent

2 个答案: