Angular2 2.1.1 上的 ng2-nvD3答案

【问题标题】：ng2-nvD3 on Angular2 2.1.1Angular2 2.1.1 上的 ng2-nvD3
【发布时间】：2016-11-08 18:50:58
【问题描述】：

我正在尝试在 Angular2 项目（核心 v2.1.1）中使用 ng2-nvd3 (https://github.com/krispo/ng2-nvd3)，但它不起作用。

我已将 nvD3 放入我的 @MgModule 的声明中：

  declarations: [
        ...
        TestComponent,
        nvD3,
      ],

我已经按照描述设置了组件：

import {Component} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
declare let d3:any;

@Component({
    template: '<div><nvd3 [options]="options" [data]="data"></nvd3></div>'
})
export class TestComponent {
    options;
    data;
    ngOnInit(){
        this.options = {
            chart: {
                type: 'discreteBarChart',
                height: 450,
                margin : {
               ...

但我得到了错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./TestComponent class TestComponent - inline template:0:31 caused by: nv is not defined

我的 package.json 文件中有 nvd3 和 d3，但我不确定应该如何处理它们。

【问题讨论】：

标签： angular d3.js nvd3.js ng2-nvd3

【解决方案1】：

我也遇到过类似的问题，虽然它不是很漂亮，但请尝试在 index.html 中包含以下内容：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>

【讨论】：

hm，我通过复制本地文件（由 ng2-nvd3 引用）尝试了相同的操作，但仍然导致错误，可能是错误的版本。

【解决方案2】：

我通过将这些行添加到我的 vendor.ts（供应商依赖项）来修复“未定义 nv”

import "d3";  
import "nvd3";

【讨论】：

【解决方案3】：

您可以在下面链接中的一个非常简单的 repo 中查看有效的解决方案。它使用 Webpack 进行捆绑。

已安装包中的相关文件是

/public/stylesheets/nv.d3.min.css (copied from nvd3 node-modules folder)
/assets/nvd3/ng2-nvd3.ts (copied from ng2-nvd3 node-modules folder)
/assets/app/shared/nv.d3.min.js (copied from nvd3 node-modules folder)
(note: my current workaround doesn't use the nvd3.module.ts file)

然后在项目本身中，让一切正常工作：

/views/index.hbd (link to styles)
/assets/app/app.module.ts (declare nvD3)
/assets/app/app.component.ts (import nvD3 and nv.d3.min.js, declare d3)

此设置允许在目标组件（本例中为 app.component）中使用 nvd3。

https://github.com/ekuusi/nvd3-ng2-grid-issue

【讨论】：

【解决方案4】：

我遇到了同样的问题，发现它只适用于 D3 版本 3，除了已经提到的必要解决方法。

【讨论】：

【解决方案5】：

对于 angular 2 RC6 up 试试这个:: angular2-nvd3

【讨论】：