bugfix> javascript > 投稿

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 件
  • インポートしようとしているライブラリは、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;
    
    

あなたの答え