angular2-highcharts Highcharts導出模塊

Question

如何將導出模塊包含到angular2應用程序中？

我曾嘗試將下面的腳本添加到index.html，但沒有任何反應。

<script src="http://code.highcharts.com/modules/exporting.js"></script> 

Answer 1

創建一個指示，HighchartsExporting，例如這裏是一個Highcharts：

import {Directive, ElementRef, Input, OnDestroy} from '@angular/core'; 

@Directive({ 
    selector: '[ng2-highcharts]', 
    exportAs: 'ng2Highcharts' 
}) 
export class Ng2Highcharts implements OnDestroy { 
    hostElement: ElementRef; 
    pChart: HighchartsChartObject; 
    constructor(ele: ElementRef) { 
     this.hostElement = ele; 
    } 

    @Input('ng2-highcharts') set options(opt: HighchartsOptions) { 
     if (!opt) { 
      console.log('No valid options...'); 
      console.log(opt); 
      return; 
     } 
     if (opt.series || opt.data) { 
      if (this.pChart) { 
       this.pChart.destroy(); 
      } 
      if (!opt.chart) { 
       opt.chart = {}; 
      } 
      opt.chart.renderTo = this.hostElement.nativeElement; 
      this.pChart = new Highcharts.Chart(opt); 
     } else { 
      console.log('No valid options...'); 
      console.dir(opt); 
     } 
    } 


    public get chart() : HighchartsChartObject { 
     return this.pChart; 
    } 

    ngOnDestroy() { 
     if (this.pChart) { 
      this.pChart.destroy(); 
     } 
    } 
} 

Answer 2

由於角CLI 1.0 RC.1和最新angular2-highcharts，這是爲我工作（見也是這個正在進行的討論爲推薦的解決方案https://github.com/gevgeny/angular2-highcharts/issues/156）：

npm install --save angular2-highcharts 
npm install --save @types/highcharts 

在typings.d.ts補充：declare var require: any;

然後在app.module.ts：

import { ChartModule } from 'angular2-highcharts'; 
import {HighchartsStatic} from 'angular2-highcharts/dist/HighchartsService'; 
export function highchartsFactory() { 
    var hc = require('highcharts'); 
    var hcm = require('highcharts/highcharts-more'); 
    var exp = require('highcharts/modules/exporting'); 

    hcm(hc); 
    exp(hc); 
    return hc; 
} 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ChartModule 
    ], 
    providers: [{provide: HighchartsStatic, useFactory: highchartsFactory}], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

老答案早期版本：

如果使用角CLI（的WebPack）和angular2-highcharts，這個工作對我來說：

import {Highcharts} from 'angular2-highcharts'; 
require('highcharts/modules/exporting')(Highcharts);