angular2-highcharts Highcharts exporting module

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);