javascript - 带有Typescript的Angular2，如何在延迟加载模块中使用Plupload CDN脚本文件？

Question

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

现在在此页面上有完整的答案!

这个任务的结果如下:

1. 将 Plupload 与 Angular 2 和 TypeScript 结合使用的示例
2. 如何在 Angular 2 中从 CDN 延迟加载脚本
3. 如何在惰性加载模块中使用 Plupload 的示例

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

   (请参阅编辑历史，了解曾经构成此问题的丑陋细节。)

Answer 1

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

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

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

在我的实现中请注意以下几点:

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

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