Angular4：JavaScriptファイル内で関数を使用する

bugfix> javascript > 投稿 2020-08-22 18:51

JavaScriptファイルを角度コンポーネントにロードしようとしています。ここから完全な縮小版をロードしました：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にインポートする」とは少し違うと思います。なぜなら、インポートしようとしているライブラリに関係があるのではないかと思うからです。しかし、私は確信が持てず、これに関するアドバイスを求めています。

インポートしようとしているライブラリは、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モジュールの場合、 import * as ModuleName from './modulePath.js'; を使用できます component.tsファイルで ModuleName.exportedMethod() として呼び出します。

Angularパイプラインに接続して、モジュールがロードされていることを確認しますインポートします。角度付きcliを使用している場合は、単にそれを含めてくださいセクションapps/scriptsのangle-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>

インポートしたファイルで必要な関数をエクスポートする必要があると思います。

ライブラリがコンパイルされることを疑う必要がありますスクリプトを追加しますangular-cli.json
```
"scripts": [
....
'<path to file>/assets/scripts/load-image.all.min.js'
....
]
```
それから
```
declare var loadImage: any;
```

bugfix

Angular4：JavaScriptファイル内で関数を使用する

javascript

angular

import

関連記事