为了减少代码的编写，将复用率高的代码组件化，是angular提倡的一种方式。在angular1中，自定义组件还是比较复杂的。但是在angular中，就显得相当简单。
1.自定义组件
创建一个ts文件，以引用ionic2+highcharts为例
import {Component,ElementRef,AfterViewInit,OnDestroy,ViewChild,ContentChild} from '@angular/core';
import * as Highcharts from 'highcharts';//引入hightcharts
import {ApiengineService} from '../../providers/apiengine-service/apiengine-service' //自定义的调用api接口
@Component({
selector:'shop-chart', // 在模版中使用<shop-chart></shop-chart>直接调用
template: '<div #shopChart></div>',
providers:[ApiengineService]
})
export class ShopChart implements AfterViewInit, OnDestroy{
constructor(public apiengine:ApiengineService){}
//调用自定义接口，获取图表参数
loadData():any{
return new Promise((resolve,reject)=>{
this.apiengine.getH("api.assister.shopChartMonth",{}).then(data=>{
if(data['errno'] === 0){
resolve(data['data']);
}
}).catch((err)=>{
reject(err)
})
})
}
@ViewChild("shopChart") public chartEl:ElementRef;
private _chart: any;
ngAfterViewInit(){
this.loadData().then((data)=>{
let opts: any = data;
//本应用为webapp，为方便日后对图表的更新，故将hightcharts的主要参数opts通过api方式获取
if (this.chartEl && this.chartEl.nativeElement) {
opts.chart.renderTo = this.chartEl.nativeElement;
this._chart = new Highcharts.Chart(opts);
}
});
}
ngOnDestroy() {
this._chart.destroy();
}
}
通过以上，就可以实现一个自定义的组件<shop-chart>
2. 使用
在需要使用的ts文件中，添加以下代码
import {ShopChart} from '../../shopChart';
在@Component中添加directives
@Component{
...
directives:[ShopChart]
}
再通过@ViewChild方式将组件导入
@ViewChild(ShopChart) shopChart:ShopChart;
最后html部分直接使用
<shop-chart></shop-chart>
3.效果图
做了个demo，请忽略图表
4.遗憾
目前就发现这个方式可以顺利实现在segement下切换展现图表。每次切换时都会调用api，感觉不是很好。目前也是初学angular2，还不能完全理解ViewChild／ViewChildren／ContentChild等的区别和具体使用方法。后续有更好的方法将更新。也希望各位大神能给给出更好的解决方案。感激不尽。
