Angular4 - 在 JavaScript 文件中使用函数

Question

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

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

ERROR ReferenceError: loadImage is not defined

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

组件

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 文件导入 Angular”略有不同，因为我觉得这可能与我尝试导入的库有关。但是，我不确定并就此寻求建议。

Answer 1

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

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

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

并调用组件中的方法

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

我使用window，因为库直接将自身绑定到 window.object

---

更多详情

• 要将 javascript 模块与 typescript 一起使用，请将 allowJs: true 添加到 tsconfig.js 文件中。

• import './file 被称为仅用于副作用的导入，不会更改模块的范围，但可以访问全局应用程序范围。如果您想扩展已导入的模块，它可以为您提供帮助。

• 您可以通过不同的方式导入 js 模块：

  • 对于 CommonJs 模块，可以在您的 component.ts 文件中使用 import * as ModuleName from './modulePath.js'; 并调用 ModuleName.exportedMethod()。

  • 到 Angular 管道，以确保它加载了模块 进口它。如果您使用的是 Angular cli，只需将其包含在您身上 应用程序/脚本部分中的 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;