Angular 2 自定义指令不绑定迷你图 barChart答案

【问题标题】：Angular 2 custom directive not binding sparkline barChartAngular 2 自定义指令不绑定迷你图 barChart
【发布时间】：2016-07-11 14:29:26
【问题描述】：

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

迷你图不是函数。

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

【问题讨论】：

标签： angular angular2-directives sparklines

【解决方案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 期间可用，但在构造函数内不可用。

【讨论】：

谢谢蒂埃里，但这仍然没有解决迷你图不是函数的问题。我更新了plunker。如何修复这个迷你图不是我认为即使在我引用 index.html 中的迷你图脚本之后它仍然没有拾取它的功能。

【解决方案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 编译没有错误。

【讨论】：

【解决方案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>

我使用的是角度 4。它也应该在角度 2 中工作

【讨论】：