Angular 2 个自定义指令未绑定迷你图 barChart

Question

我正在尝试编写自定义指令来传递输入值，然后将数据绑定到迷你图，但出现错误：

sparkline is not a function.

下面是插件：

 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

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

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

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 移动到外部文件夹，例如“/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>

我使用的是 angular 4。它应该可以在 angular 2 中使用

Angular 2 个自定义指令未绑定迷你图 barChart

Angular 2 custom directive not binding sparkline barChart

angular

angular2-directives

sparklines