如何從Angular 2中的自定義指令調用方法？

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(); 
    } 
} 

我包括我的內聲明的應用程序模塊內部指令。 我得到的錯誤說：無法讀取屬性'KendoInitGenericDonutChart'od未定義。 我不知道我在哪裏錯了，如何從指令中訪問方法？ 感謝您的建議！

Answer 1

嘗試更換

@ContentChild('genericCharts') genericCharts : GenericChartsDirective 

隨着

@ContentChild('GenericChartsDirective') genericCharts : GenericChartsDirective