Angular2 with Typescript，如何在延迟加载的模块中使用Plupload CDN脚本文件？ [英] Angular2 with Typescript, how to use Plupload CDN script file in lazy-loaded module?

问题描述

我想在Angular2组件中使用Plupload并从CDN访问Plupload JavaScript文件。我希望它特定于一个组件，以便在不需要时不下载它 - 我希望它在一个延迟加载的模块中。我怎样才能做到这一点？

现已在此页面上完全回答！

此任务的结果，其中包括向与我一起努力工作的两个人提供和奖励奖金，如下：

1. 使用带有Angular 2的Plupload的示例和TypeScript


2. 如何在Angular 2中从CDN延迟加载脚本


3. 如何在延迟加载的模块中使用Plupload的示例



4. 如何在Angular 2中使用延迟加载的脚本

   
   
   

   （有关用于构成此内容的丑陋细节，请参阅编辑历史记录问题。）

解决方案

以下是您需要做的事情的概述从CDN加载Plupload时创建一个延迟加载的Plupload功能：

1. 当需要该功能时（例如用户点击按钮或访问页面），动态地将< script> 标记添加到页面以从CDN加载Plupload库。


2. 等到库加载后继续（或者你可能得到plupload未定义错误）。


3. 在一个Angular模板中显示与Plupload交互的UI。在最简单的形式中，这个UI包含两个按钮：选择文件和上传文件。


4. 初始化Plupload并将其连接到UI。

完整的工作代码： https ：//plnkr.co/edit/4t39Rod4YNAOrHmZdxqc？p =预览

请注意我的实施中的以下几点：

• 关于＃2。检查Plupload是否已完成加载的更好方法是轮询全局命名空间是否存在 plupload 变量。只要 window.plupload 不存在，就意味着尚未加载库，我们不应该继续。为简单起见，我的代码只等待一秒钟然后继续。


• 4号可能有点棘手。 Plupload大量使用直接DOM访问将其API连接到HTML（例如 document.getElementById（'filelist'））。这是Angular不鼓励的事情，你应该尽可能地避免。更具体地说，直接DOM访问用于以下位置：
  
  
  
  
  • 告诉Plupload哪个DOM元素应该触发选择文件对话框（他们称之为 browse_button 配置选项）。为此我无法避免直接DOM引用，我使用 @ViewChild 装饰器来获取选择文件按钮。
  
  
  • 在模板中显示所选文件。为此我将Plupload语法转换为常规的Angular语法。我将所选文件推送到名为 fileList 的类属性，我使用标准 * ngFor 在模板中显示。
  
  
  • 上传文件按钮会触发一些执行实际上传的代码，并刷新UI以显示上传进度。再一次，我使用事件绑定和数据绑定将其转换为常规的Angular语法。
  
  

<请告诉我您是否有任何问题。

I would like to use Plupload in an Angular2 component and access the Plupload JavaScript file from a CDN. I want it specific to a component so that it is not downloaded if it is not required - I want it to be in a lazy loaded module. How can I do this?

Now fully answered on this page!

The result of this quest, which included offering and awarding bounties to two people who worked hard with me on it, is as follows:

1. Example of using Plupload with Angular 2 and TypeScript
2. How to Lazy load a script from a CDN in Angular 2
3. Example of how to use Plupload in a lazy loaded module

4. How to use a lazy loaded script in Angular 2

   (See edit history for the ugly details that used to make up this question.)

解决方案

Here's the overview of what you need to do to create a lazy-loaded Plupload feature while loading Plupload from a CDN:

1. When the feature is needed (e.g. user clicks a button or visits a page), dynamically add a <script> tag to the page to load the Plupload library from a CDN.
2. Wait until the library is loaded to proceed (or you could get a "plupload is undefined" error).
3. Display the UI to interact with Plupload in one of your Angular templates. In its simplest form, this UI consists of two buttons: "Select files" and "Upload files".
4. Initialize Plupload and wire it up to the UI.

Complete, working code: https://plnkr.co/edit/4t39Rod4YNAOrHmZdxqc?p=preview

Please take note of the following points in my implementation:

• Regarding #2. A better way to check whether Plupload has finished loading would be to poll the global namespace for the existence of the plupload variable. As long as window.plupload does not exist, it means the library hasn't been loaded yet and that we should NOT proceed. For simplicity my code just waits for one second and proceeds.
• Number 4 can prove a bit tricky. Plupload makes a heavy use of direct DOM access to wire its API to the HTML (e.g. document.getElementById('filelist')). This is something Angular discourages and that you should try avoiding whenever possible. More specifically direct DOM access is used in the following places:
  • To tell Plupload which DOM element should trigger the "Select files" dialog (what they call the browse_button config option). For this I could not avoid the direct DOM reference and I used the @ViewChild decorator to get a hold of the "Select Files" button.
  • To display selected files in the template. For this I converted the Plupload syntax into the regular Angular syntax. I push selected files to a class property called fileList which I display in the template using a standard *ngFor.
  • The "Upload Files" button triggers some code that does the actual uploading and refreshes the UI to show upload progress. Once more, I converted this to regular Angular syntax using event binding and data binding.

Let me know if you have any questions.

这篇关于Angular2 with Typescript，如何在延迟加载的模块中使用Plupload CDN脚本文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！