角2のカスタムディレクティブがスパークラインをバインドしていませんbarChart

Question

入力値を渡してスパークラインチャートにデータをバインドするカスタムディレクティブを作成しようとしていますが、sparklineがエラーになります。

以下

はplunkerです：

import { Directive, ElementRef, HostListener, Input , OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[myBarChart]' 
}) 
export class BarChartDirective { 
    private el: HTMLElement; 

    @Input('myBarChart') barChartValues: number[] = []; 

    constructor(el: ElementRef) { this.el = el.nativeElement; } 

    ngOnInit() { 
    this.el.sparkline(this.barChartValues, { 
    type: 'bar', barColor: 'green', width: 300, height: '50', 
    barWidth: 8, barSpacing: 3, colorMap: ["green", "yellow", "red"], 
    chartRangeMin: 0 
    }); 
} 
} 

http://plnkr.co/edit/BpY6Kd1bSMzWTKSZqJzv

あなたはngOnInitライフサイクルフック法にあなたの初期化処理を移動する必要が

Answer 1

@dfsq感謝すべてのヘルプ：

constructor(private el: ElementRef) { 
} 

ngOnInit() { 
    el.sparkline(this.barChartValues, { 
    type: 'bar', barColor: 'green', width: 300, height: '50', 
    barWidth: 8, barSpacing: 3, colorMap: ["green", "yellow", "red"], 
    chartRangeMin: 0 
    }); 
} 

入力値はavaのみですngOnInitの直前で最初のngOnChangesの間は作成可能ですが、コンストラクタ内にはありません。