Question

我正在尝试编写自定义指令来传递输入值，然后将数据绑定到迷你图表，但它给了我错误迷你图不是一个函数。

以下是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

任何帮助赞赏@dfsq

Answer 1

您需要将初始化处理移动到ngOnInit生命周期钩子方法：

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

输入值仅在ngOnChanges之前的第一个ngOnInit期间可用，但不在构造函数中。

Answer 2

差不多两年后，我在这里找到了一个解决方案，解决了Angular对JQuery sparkline函数不了解的事实。只需在示例代码的第2行附近添加declare var $: any;即可。然后在下面的关键行中使用JQuery $()语法：

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

Angular编译没有错误。

Answer 3

我没有使用指令。这是一种不使用指令的方法。对我来说，它的工作。

首先将您的jquery.sparkline.js移动到外部文件夹，例如＆＃34; /external/js/jquery.sparkline.js"。

然后使用像这样的创建元素。

initSparkline(){

    let s = this.renderer.createElement('script');
    s.type='text/javascript';

    // TODO: Move this call to ngDoChange event 
    s.text = "$(function() { setTimeout(function(){ $('#inlinesparkline').sparkline();}, 2000);})";

    this.renderer.appendChild(this.document.body, s);
    }

}

并根据需要调用它。并在html。

<div id="inlinesparkline">50,60,30,35,25,10,50,20,25,40,45,60,30</div>

我使用角度4.它应该在角度2也工作

Angular 2自定义指令不绑定sparkline barChart

3 个答案: