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

Я пытаюсь загрузить файл 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», потому что у меня есть ощущение, что это может быть связано с библиотекой, которую я пытаюсь импортировать. Однако я не уверен и прошу совета по этому поводу.


javascript angular import referenceerror
person Community    schedule 25.05.2018    source источник
comment
Дубликат - stackoverflow.com/questions/38103920/   -  person Abhijeetk431    schedule 25.05.2018
comment
Возможный дубликат Как использовать функции javascript в компоненте Angular 2 из другого файла   -  person Abhijeetk431    schedule 25.05.2018

Ответы (3)


arrow_upward
1
arrow_downward

Библиотека, которую вы пытаетесь импортировать, не поддерживает модули 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>

person Eugene Gavrilov    schedule 25.05.2018
comment
Потрясающий. Не знал, что ты так умеешь. Когда я перешел на вышеуказанное, произошло несколько вещей. Visual Code указывает, что файл был разрешен с «...» на «..», но «--allowJs» не установлен. - Он компилируется в любом случае. В браузере я запускаю код и теперь получаю, что LoadImage.loadImage не является функцией. Я пропустил что-то здесь очевидное? Чтобы уточнить, я удалил все ссылки в файле angular-cli.json и только что реализовал вышеизложенное. Еще раз спасибо Евгений! - person ; 25.05.2018
comment
Я только что увидел ваш обновленный комментарий. Я удалил импорт компонентов и добавил скрипт в файл angular cli. Это правильно? Или мне нужны оба? Если у меня есть оба, он не скомпилируется. Если у меня есть ссылка только в angular-cli, как мне вызвать ее в файле компонента? Цените свое время! :) - person ; 25.05.2018
comment
Вы правы, спасибо за поправку! Вы можете импортировать его только одним способом, а не обоими. Я исправлю ответ. - person Eugene Gavrilov; 25.05.2018
comment
Спасибо Евгений. Я немного смущен тем, что происходит. Если я включу скрипт либо в индексный файл, либо в angular-cli, консоль браузера выдаст ошибку: Uncaught ReferenceError: требование не определено. Однако, если я импортирую файл в свой файл component.ts (а не в модуль), а затем ссылаюсь на функцию как Loadimage.loadImage, он указывает, что LoadImage.loadImage не является функцией. Любые идеи? - person ; 25.05.2018
comment
Хорошо, что вы добавили --allowJs в свой tsconf. Я только что понял, что ваша библиотека просто не использует никакого значения для экспорта и привязки функции loadImage непосредственно к объекту окна. - person Eugene Gavrilov; 25.05.2018
comment
Спасибо. Да, я исправил часть --allowJs, спасибо! - Хорошо, что касается остального, есть предложения? Скрипты отлично работают в ручке кода и т. Д. В качестве демонстрации. Просто интеграция его в angular оказывается настоящей занозой в заднице. - person ; 25.05.2018
comment
В вашем случае можно было бы использовать библиотеку, добавив в angular-cli.json, как вы уже сделали, установите "allowJs": true в tsconfig.js и, наконец, используя ее в своем модуле как window.loadImage - person Eugene Gavrilov; 25.05.2018
comment
Давайте продолжим обсуждение в чате. - person ; 25.05.2018

arrow_upward
0
arrow_downward

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

person Bernd Schuhmacher    schedule 25.05.2018
comment
Спасибо за ответ Бернд. Извинения. Новое в этом. Вы имеете в виду файл load-image.all.min.js? Если да, то как настроить экспорт? - person ; 25.05.2018

arrow_upward
0
arrow_downward

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

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

потом

declare var loadImage: any;
person segito10    schedule 25.05.2018
comment
Спасибо Сегито - я тоже пробовал это. Решение компилируется, но в консоли браузера отображается «Uncaught ReferenceError: требование не определено». - person ; 25.05.2018