Question

我正在尝试将JavaScript文件加载到我的角度组件中。我从这里加载了完整的缩小版本：https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image.all.min.js并将任何相关的脚本放在我的脚本文件夹中。

当代码运行并到达＆＃39; loadImage＆＃39;时，控制台会触发错误：

ERROR ReferenceError：未定义loadImage

解决此问题的最佳方法是什么？

组件

import '../../../assets/scripts/load-image.all.min.js';
declare var loadImage: any;

...

dropChangeHandler(e) {
   e.preventDefault()
   e = e.originalEvent
   var target = e.dataTransfer || e.target
   var file = target && target.files && target.files[0]

   var options = {
     maxWidth: 1000,
     maxHeight: 1000,
     canvas: true,
     pixelRatio: window.devicePixelRatio,
     // downsamplingRatio: 0.5,
     orientation: true
   }
   if (!file) {
     return
   } else {

   this.currentFile = file;   
   if (!loadImage(file, this.updateResults, options)) {

   }

  }
}

我认为这个问题与其他人将JS文件导入角色＆＃39;因为我觉得这可能与我试图导入的图书馆有关。但是，我不确定并就此问题寻求建议。

Answer 1

您尝试导入的库不支持es6模块。由于库中没有导出，导入后它不会向您的作用域添加任何变量。

在您的特定情况下，最简单的方法是将脚本添加到index.html：

<script src="assets/scripts/load-image.all.min.js"></script>

并使用

调用组件中的方法

window.loadImage(file, this.updateResult, options)

我使用window因为库直接绑定到window.object

更多详情

使用带有typescript的javascript模块将allowJs: true添加到tsconfig.js文件。
import './file仅被视为副作用的导入，并且不会更改模块的范围，但可以访问全局应用范围。如果您想扩展已导入的模块，它可以帮助您。
您可以通过不同的方式导入js模块：
- 对于CommonJs模块，您可以在component.ts文件中使用import * as ModuleName from './modulePath.js';并调用ModuleName.exportedMethod()。
- 到Angular管道，确保它加载了哪个模块进口它。如果您使用的是角度cli，只需将其包含在内即可 apps-scripts部分中的angular-cli.json：
```
{
  "apps":
     ...
     "scripts": [
         "assets/scripts/load-image.all.min.js"
     ]
}
```
- 如果您不使用angular-cli，可以加入index.html： <script src="assets/scripts/load-image.all.min.js"></script>

Answer 2

我认为你需要在导入的文件中导出想要的功能。

Answer 3

您必须不确定是否将编译库在 angular-cli.json

中添加脚本

"scripts": [
....
'<path to file>/assets/scripts/load-image.all.min.js'
....
]

然后

declare var loadImage: any;

Angular4 - 在JavaScript文件中使用函数

3 个答案: