使用angular2的自定义组件

为了减少代码的编写，将复用率高的代码组件化，是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等的区别和具体使用方法。后续有更好的方法将更新。也希望各位大神能给给出更好的解决方案。感激不尽。