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にインポートする」とは少し違うと思います。なぜなら、インポートしようとしているライブラリに関係があるのではないかと思うからです。しかし、私は確信が持てず、これに関するアドバイスを求めています。
回答 3 件
インポートしたファイルで必要な関数をエクスポートする必要があると思います。
ライブラリがコンパイルされることを疑う必要があります スクリプトを追加しますangular-cli.json
"scripts": [ .... '<path to file>/assets/scripts/load-image.all.min.js' .... ]
それから
declare var loadImage: any;
関連記事
- JavaScriptで別の関数内にある関数を呼び出す方法
- 関数内から実行したときに配列のサイズが正しく計算されないのはなぜですか?
- javascript関数から返されたデータをFlaskバックエンドに送信します
- Reactステートレスコンポーネント内で関数を定義しても大丈夫ですか?
- Javascript:ネストされたループ内のMathrandomは、毎回同じシーケンスを返します
- クラス拡張子のJavaScript関数が認識されない
- 内部のシェルエイリアスはどのように機能しますか?
- Unity:Unityからコンパニオンオブジェクト内でAndroidKotlin関数を呼び出す
- JavaScriptの関数から値を取得する方法
- ここでアルゴリズムはどのように機能しますか?関数はそれ自体の内部で呼び出されます
関連した質問
- Angular Karmaテスト:メソッドはクラスのプロパティを変更しませんか?
- この単純なコードでインポートとエクスポートを使用するにはどうすればよいですか?
- インデックス付きのデフォルトの選択値を取得できません(角度のあるマテリアルマット-ボタン-トグル)
- ページネーションに関するAngularTable Call API
- Angularで「最適化」をオンにすると、PrimeNg要素のレンダリングで問題が発生するのはなぜですか?
- 配列内の各アイテムをフェッチする
- 二重引用符を使用したAngularAPI呼び出し
- フィルタ選択の更新されたカウントを取得するにはどうすればよいですか?
- 選択した場所の値の代わりに各チェックボックスの値を表示する方法
- 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:
angular-cliを使用しない場合は、
index.html
に含めることができます :<script src="assets/scripts/load-image.all.min.js"></script>