针对这篇文章的升级
自定义组件
import {Component,Input,Output,ElementRef,ViewChild} from '@angular/core';
import __Highcharts from 'highcharts'
@Component({
selector: 'my-hcharts',
template: `
<div #chart></div>
`
})
export class HchartsComponent{
@ViewChild("chart") public create:ElementRef;
private userOpts : any ;
@Input() set charts(opts:any){
this.userOpts = opts ;
this.init();
}
private _chart : any ;
private init(){
if(this.userOpts ){
let opts :any = this.userOpts ;
opts.chart.renderTo = this.create.nativeElement;
this._chart = new __Highcharts.Chart(opts);
}
}
constructor(element:ElementRef){
this.create = element ;
}
}
引用
//在app.component.ts中引入
//在需要调用的模版中写标签
<my-hcharts [charts]="month_summary"></my-hcharts>
