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

How to call method from custom directive in Angular 2?

本文关键字：指令 自定义 调用 方法 Angular      更新时间：2023-09-26

我在angular 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'未定义。我不知道我在哪里错了，如何从指令访问方法?谢谢你的建议!

尝试替换

@ContentChild('genericCharts') genericCharts : GenericChartsDirective


@ContentChild('GenericChartsDirective') genericCharts : GenericChartsDirective
相关文章：