Angular4 - использовать функцию внутри файла JavaScript - PullRequest
Новая
       22

Angular4 - использовать функцию внутри файла JavaScript

0 голосов
/ 25 мая 2018

Я пытаюсь загрузить файл JavaScript в мой угловой компонент.Я загрузил полную минимизированную версию отсюда: https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image.all.min.js, а также поместил все связанные скрипты в мою папку скриптов.

Когда код запускается и достигает 'loadImage', консоль выдает ошибку:

ОШИБКА 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 в angular», потому что у меня есть ощущение, что это может быть связано с библиотекой, которую я пытаюсь импортировать.Тем не менее, я не уверен и ищу совет по этому вопросу.

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Вы не должны быть уверены, что библиотека будет скомпилирована. Добавьте скрипт в angular-cli.json 

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

затем 

declare var loadImage: any;
0 голосов
/ 25 мая 2018

Библиотека, которую вы пытаетесь импортировать, не поддерживает модули es6.Из-за отсутствия экспорта в библиотеку, она не добавляет переменные в вашу область после импорта.

В вашем конкретном случае проще всего добавить скрипт в index.html:

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

и вызов метода в компоненте с помощью

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

Я использую window, поскольку библиотека напрямую связывается с window.object

Подробнее

  • Для использования модулей JavaScript с машинописью добавьте allowJs: true в tsconfig.js файл.

  • import './file известен как импорт только для побочных эффектов и не изменяет область действия модуля, но может получить доступ к глобальной области приложения.Это может помочь вам в случае, если вы хотите расширить уже импортированный модуль.

  • Вы можете импортировать модуль js разными способами:

    • Для модулей CommonJs этоможно использовать import * as ModuleName from './modulePath.js'; в вашем файле component.ts и вызывать ModuleName.exportedMethod().

    • для конвейера Angular, чтобы убедиться, что он загружен модулем, который его импортирует.Если вы используете angular cli, просто включите его в angular-cli.json в разделе apps / scripts: 

      {
  "apps":
     ...
     "scripts": [
         "assets/scripts/load-image.all.min.js"
     ]
}

    • Если вы не используете angular-cli, выможет включать в себя index.html: <script src="assets/scripts/load-image.all.min.js"></script>

0 голосов
/ 25 мая 2018

Я думаю, вам нужно экспортировать нужную функцию в ваш импортированный файл.

...