Angular2 with Typcript, как использовать файл сценария CDN Plupload в ленивом загруженном модуле?

Question

Я хотел бы использовать Plupload в компоненте Angular2 и получить доступ к файлу JavaScript Plupload из CDN. Я хочу, чтобы он был специфичным для компонента, чтобы он не был загружен, если он не требуется - я хочу, чтобы он был в ленивом загруженном модуле. Как я могу это сделать?

Теперь полностью ответил на эту страницу!

В результате этого квеста, который включал предложение и награждение щедроты для двух людей, которые упорно работали со мной на этом, заключается в следующем:

1. Пример использования Plupload с угловыми 2 и машинопись
2. Как Лазы загрузить сценарий из CDN в угловом 2
3. примера того, как использовать Plupload ленивым загруженного модуля

4. Как использовать ленивый загруженный скрипт в радиально-2

   (См истории изменений для некрасивых деталей, которые используются, чтобы сделать этот вопрос.)

Answer 1

Вот обзор того, что вам нужно сделать, чтобы создать ленивую загруженную функцию Plupload при загрузке Plupload из CDN:

1. Когда функция необходима (например, пользователь нажимает кнопку или посещение страницы) , динамически добавьте тег <script> на страницу, чтобы загрузить библиотеку Plupload из CDN.
2. Подождите, пока библиотека не будет загружена, чтобы продолжить (или вы можете получить ошибку "plupload is undefined").
3. Отобразить пользовательский интерфейс для взаимодействия с Plupload в одном из ваших угловых шаблонов. В своей простейшей форме этот пользовательский интерфейс состоит из двух кнопок: «Выбрать файлы» и «Загрузить файлы».
4. Инициализировать Plupload и подключить его к пользовательскому интерфейсу.

Полный рабочий код: https://plnkr.co/edit/4t39Rod4YNAOrHmZdxqc?p=preview

Пожалуйста, обратите внимание на следующие моменты в моей реализации:

• Что касается # 2. Лучшим способом проверить, закончилась ли загрузка Plupload, является опрос глобального пространства имен для существования переменной plupload. Пока window.plupload не существует, это значит, что библиотека еще не загружена и что мы НЕ должны продолжать. Для простоты мой код просто ждет одну секунду и продолжается.
• Номер 4 может показаться немного сложным. Plupload сильно использует прямой доступ DOM для подключения своего API к HTML (например, document.getElementById('filelist')). Это то, что угловатое препятствует и что вы должны стараться избегать, когда это возможно. Более конкретно прямой доступ DOM используется в следующих местах:
  • Рассказывать Plupload, который DOM элемент должен вызвать в «Выбрать файлы» Диалог (что они называют опцию browse_button конфигурации). Для этого я не мог избежать прямой ссылки DOM, и я использовал декоратор @ViewChild, чтобы удержать кнопку «Выбрать файлы».
  • Чтобы отобразить выбранные файлы в шаблоне. Для этого я преобразовал синтаксис Plupload в регулярный синтаксис углов. Я подталкиваю выбранные файлы к свойству класса fileList, которое я показываю в шаблоне, используя стандарт *ngFor.
  • Кнопка «Загрузить файлы» запускает код, который выполняет фактическую загрузку и обновляет пользовательский интерфейс, чтобы показать ход загрузки. Еще раз, я преобразовал это в регулярный Угловой синтаксис, используя привязку события и привязку данных.

Позвольте мне знать, если у вас есть какие-либо вопросы.

Answer 2

В этом подходе нет необходимости в каких-либо дополнительных модулей загрузчика.

Смотрите пример (проверьте консоль WooHoo): http://plnkr.co/edit/gfUs4Uhe8kMGzPxwpBay?p=preview обновленный plunker: https://plnkr.co/edit/leG062tg7uX8sLrA0i2i?p=preview

Вы можете LazyLoad некоторые JS, добавив URL скрипта вам документ:

Создать my-lazy-load.function.ts:

export function lazyload(url) { 
    // based on https://friendlybit.com/js/lazy-loading-asyncronous-javascript/ 

    let scripts = document.getElementsByTagName('script'); 
    for (let i = scripts.length; i--;) { 
     if (scripts[i].src.match(url)) return true; 
    } 

    let s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = url; 
    let x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(s, x); 

    return true; 
} 

В вашей компании о том, что вы хотите добавить плуп:

import {lazyload} from "./my-lazy-load.function.ts"; 

export class MyComponent implements OnInit { 

    pluploadInterval:number = null; 
    hasPlupload: boolean = false; 

    ngOnInit() { 
     lazyload("https://cdnjs.cloudflare.com/ajax/libs/plupload/2.3.1/plupload.full.min.js"); 

     this.pluploadInterval = window.setInterval(()=>{ 
      if(window.plupload) { // you can check existence of plupload object any way you want 

       // Woohoo, I am ready to be used 

       this.hasPlupload = true; // everything is run outside ngZone, wrap it if angular2 is not reacting to changes, or change window.setInterval to setInterval 
       window.clearInterval(this.pluploadInterval); // don't forget to clean interval 
      } 
     }, 100); // timeinterval can vary 
.... 

Браузер автоматически загрузит это изображение.

Уведомление if(plupload) Предполагается, что добавлен глобальный объект plupload, который добавляет скрипт (я не знаю, действительно ли он добавлен, проверьте свой рабочий пример в чистом javascript). Как это расширение JQuery вы можете проверить это прототип, как это: jQuery test for whether an object has a method?

OLD ИСТОРИЧЕСКИЙ: @Reid здесь plunker: https://plnkr.co/edit/zDWWQbTQUSHBqCsrUMUi?p=preview plupload фактически загружен, но добавил требовать с define("plupload", ['./moxie'], extract); Я не уверен, что на данный момент как извлечь оттуда и какой пакет требует принадлежим ... коду для нахождения правильного загрузчика модуля принадлежит plupload себя, здесь (от plupload.dev.js):

if (typeof define === "function" && define.amd) { 
    define("plupload", ['./moxie'], extract); 
} else if (typeof module === "object" && module.exports) { 
    module.exports = extract(require('./moxie')); 
} else { 
    global.plupload = extract(global.moxie); 
} 

Answer 3

Я думаю, что ваше Лучше всего использовать библиотеку Require.js, чтобы вы могли динамически загружать свои скрипты изнутри r компонентов.

Небольшой компромисс заключается в том, что вам придется добавить эту библиотеку 18 КБ на страницу index.html (CDN), однако это может сэкономить вам огромное количество загрузок, если ваши сторонние библиотеки массивны.

У меня нет опыта использования plupload, поэтому вместо этого я собрал следующий plunkr, который использует внешнюю анимационную библиотеку, взятую из CDN. Plunkr оживляет число от 0 - 100.

https://plnkr.co/edit/fJCtezsERYHOYplLh7Jo?p=preview

---

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script> 

---

component.ts

ngOnInit(){ 
    // Dynamically loads the framework from the CDN. 
    require(["https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"], 
    // This function is then called ONCE LOAD IS COMPLETE 
    function (common) { 
     // Do greensock things 
     var demo = {score:0}, 
     scoreDisplay = document.getElementById("scoreDisplay"); 

     //create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds. 
     var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore}) 

     //each time the tween updates this function will be called. 
     function showScore() { 
     scoreDisplay.innerHTML = demo.score.toFixed(2); 
     } 
    }); 
    } 

Что мне нравится об этом подход, заключается в том, что в onL oad от require, синтаксис не изменяется от обычной реализации библиотеки, поэтому вы можете просто скопировать свой текущий рабочий код в обратный вызов.