Question

我在角度2中有一个自定义指令，如下所示：

import {Directive} from '@angular/core'

//import {ChartModel} from '../models/chart.model'

@Directive({ selector: '[genericCharts]' })

export class GenericChartsDirective  {

 public KendoInitGenericDonutChart(selector, chartdata, type, field, description, text, legendvisible){
       let dataSourceOptions: kendo.data.DataSourceOptions = {};
       dataSourceOptions.data = chartdata;
       let dataSource: kendo.data.DataSource = new kendo.data.DataSource(dataSourceOptions);

       let chartOptions: kendo.dataviz.ui.ChartOptions = {};
       chartOptions.theme = "fiori";
       chartOptions.dataSource = dataSource;

       chartOptions.series = [{
           field: field,
           categoryField: description
       }];

       chartOptions.seriesColors = ["#00B4CC", "#008C9E", "#005F6B", "#C4BEA1", "#D4D0BE", "#F0ECDA", "#FCFAF2"];
       chartOptions.seriesClick = this.explodeDonutChartFieldOnClick;
       chartOptions.chartArea.background = "";
       chartOptions.seriesDefaults.type = type;
       chartOptions.seriesDefaults.labels.visible = true;
       chartOptions.seriesDefaults.labels.template = kendo.template("#= category#");

       chartOptions.tooltip.visible = true;
       chartOptions.tooltip.template = kendo.template("${ category }:  #= kendo.toString(percentage*100, 'n2') + '%'# -  ${ kendo.toString(value, 'n0') }");
       chartOptions.legend.visible = legendvisible;
       chartOptions.legend.position = "custom";
       chartOptions.legend.offsetX = 200;
       chartOptions.legend.offsetY = 100;
       chartOptions.legend.orientation = "vertical";
       chartOptions.legend.labels.color = "#222";
       chartOptions.legend.labels.template = kendo.template("#= data.text #:  #= kendo.toString(percentage*100, 'n2') + '%'# - #= kendo.toString(data.value, '0')#");

       $(selector).kendoChart(chartOptions);

   }  


  public explodeDonutChartFieldOnClick(e){
         if(e.dataItem.explode){
             e.sender.options.transitions = false;
             e.dataItem.explode = false; 
         }else{
            // Disable animations
          e.sender.options.transitions = false;
          // Explode the current slice
          e.dataItem.explode = true; 
         }      
          e.sender.refresh();
    }



}

我想在我的ChartsComponent中调用KendoInitGenericDonutChart方法：

import {Component, AfterViewInit, OnDestroy, OnInit, ContentChild} from '@angular/core'
import {InsaService} from '../services/insa.service'
import {ChartModel} from '../models/chart.model'
import {GenericChartsDirective} from './generic-charts'
//declare var KendoInitGenericDonutChart: any;

@Component({
    templateUrl: 'app/components/charts.component.html'
})
export class ChartsComponent implements OnDestroy, AfterViewInit {
    private assetCategorySubscription
    private currAnalysisSubscription;
   @ContentChild('genericCharts') genericCharts : GenericChartsDirective

    constructor(private _insaService: InsaService) {
       this.assetCategorySubscription = this._insaService.AssetCategoryChartEvent.subscribe(assetCategory => this.refreshAssetCategoryChart(assetCategory));
       this.currAnalysisSubscription = this._insaService.CurrencyAnalysisChartEvent.subscribe(currAnalysis => this.refreshCurrAnalysisChart(currAnalysis));  

     }

    private refreshAssetCategoryChart(assetCategory: ChartModel[]){
         this.genericCharts.KendoInitGenericDonutChart("#GenericAssetCategory", assetCategory, "donut", "Value", "Description","ASSET", true);
    }

    private  refreshCurrAnalysisChart(currAnalysis: ChartModel[]){
       this.genericCharts.KendoInitGenericDonutChart("#GenericCurrencyAnalysis", currAnalysis, "donut", "Value", "Description","CURRENCY", true);
    }


 private  onResize(event) {
    let assetCategoryChart: kendo.dataviz.ui.Chart = $("#GenericAssetCategory").data("kendoChart");
    let currencyAnalysisChart: kendo.dataviz.ui.Chart  = $("#GenericCurrencyAnalysis").data("kendoChart");



 }



   ngAfterViewInit() {
      this.genericCharts.KendoInitGenericDonutChart("#GenericAssetCategory", this._insaService.chartDataAssetCategory, "donut", "Value", "Description","ASSET", true);
      this.genericCharts.KendoInitGenericDonutChart("#GenericCurrencyAnalysis", this._insaService.chartDataCurrAnalysis, "donut", "Value", "Description","CURRENCY", true);


    }


    ngOnDestroy(){
     this.currAnalysisSubscription.unsubscribe();
     this.assetCategorySubscription.unsubscribe(); 
    }
}

我在app模块里面包含了我的指令声明。我得到的错误说：无法读取属性'KendoInitGenericDonutChart'od undefined。我不知道我错在哪里以及如何从指令访问方法？谢谢你的建议！

Answer 1

尝试替换

@ContentChild('genericCharts') genericCharts : GenericChartsDirective

使用

@ContentChild('GenericChartsDirective') genericCharts : GenericChartsDirective

如何从Angular 2中的自定义指令调用方法？

1 个答案: