Question

对于我正在进行的项目，我找到了一个我要导入的interesting library，但我不知道如何。

该项目基于Angular 2，它通过ASP.NET Core运行SPA模板（万一重要），并由webpack构建。

到目前为止，我通过NPM安装了D3和EventDrops，而不是将它们导入到我的component.ts文件中：

import * as d3 from 'd3';
import * as EventDrops from 'event-drops';

首先，我通过添加：

测试了D3.js导入

ngOnInit() {
    var eventDropsChart = d3.select("#visual");
    console.log(eventDropsChart);
    ...
}

它似乎有效，所以我尝试了下一步：

var eventDropsChart = d3.chart.eventDrops();

但它不起作用，因为

TS2339：财产＆＃39;图表＆＃39;类型＆＃39; typeof＆＃34; mypath / node_modules / @ types / d3 / index＆＃34;＆＃39;

你能帮我吗？

非常感谢！

Answer 1

经过一些实验后，我终于开始工作，但请注意，这是一种解决方法。事件将挂钩拖放到全局d3变量，而不是“d3”模块中声明的导入。因此，您可以像使用window.d3.chart.eventsDrop(...)一样使用eventsDrop，如下所示：

import {AfterViewInit, Component} from '@angular/core';
import * as d3 from 'd3';
import * as eventDrops from 'event-drops';

declare global {
    interface Window { d3: any; }
}

@Component({
  selector: 'some-selector',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements AfterViewInit{

  ngAfterViewInit(): void {
    console.log(d3, eventDrops, window.d3.chart.eventDrops)
    // or use window['d3'].chart.eventsDrop
    // or any of the answers here: https://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript
     var eventDropsChart = window.d3.chart.eventDrops();
  }

}

希望这有帮助！祝你好运！

如果我找到更加理智和优雅的方式，我会更新答案！

Answer 2

旧线程，但是如果有人遇到这个问题，我可以通过在polyfills.ts中分配global来使其工作。然后，您可以使用它，就像事件捆绑说明为Module Bundler所述一样：

(window as any).global = window;

将EventDrops（D3.js）导入Angular 2

2 个答案: