Angular2 with Typescript,如何在延迟加载的模块中使用Plupload CDN脚本文件？

Question

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

现在在这个页面上完全回答了!

这个任务的结果,包括向两个与我一起努力工作的人提供和奖励奖金,如下:

1. 使用带有Angular 2和TypeScript的Plupload的示例
2. 如何在Angular 2中从CDN加载一个脚本
3. 如何在延迟加载的模块中使用Plupload的示例

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

   (有关用于解决此问题的丑陋细节,请参阅编辑历史记录.)

Answer 1

以下是从 CDN 加载 Plupload 时创建延迟加载 Plupload 功能所需执行的操作的概述：

1. 当需要该功能时（例如用户单击按钮或访问页面），动态地<script>向页面添加标签以从CDN加载Plupload库。
2. 等到库加载后才能继续（否则您可能会收到"plupload is undefined"错误）。
3. 在您的 Angular 模板之一中显示与 Plupload 交互的 UI。在最简单的形式中，此 UI 由两个按钮组成：“选择文件”和“上传文件”。
4. 初始化 Plupload 并将其连接到 UI。

完整的工作代码：https://plnkr.co/edit/4t39Rod4YNAOrHmZdxqc ?p=preview

我的实现过程中请注意以下几点：

• 关于#2。检查 Plupload 是否已完成加载的更好方法是轮询全局命名空间以查找变量是否存在plupload。只要window.plupload不存在，就意味着库尚未加载，我们不应该继续。为简单起见，我的代码只需等待一秒钟即可继续。
• 第四个可能有点棘手。Plupload 大量使用直接 DOM 访问来将其 API 连接到 HTML（例如document.getElementById('filelist')）。这是 Angular 不鼓励的事情，您应该尽可能避免。更具体地说，直接 DOM 访问用在以下地方：
  • 告诉 Plupload 哪个 DOM 元素应该触发“选择文件”对话框（他们称之为browse_button配置选项）。为此，我无法避免直接 DOM 引用，我使用@ViewChild装饰器来获取“选择文件”按钮。
  • 显示模板中选定的文件。为此，我将 Plupload 语法转换为常规 Angular 语法。我将选定的文件推送到一个名为的类属性fileList，我使用标准*ngFor.
  • “上传文件”按钮会触发一些代码来执行实际上传并刷新 UI 以显示上传进度。我再次使用事件绑定和数据绑定将其转换为常规 Angular 语法。

如果您有任何疑问，请告诉我。