javascript – Angular2与Typescript,如何使用Plupload CDN脚本文件在延迟加载的模块?

前端之家收集整理的这篇文章主要介绍了javascript – Angular2与Typescript,如何使用Plupload CDN脚本文件在延迟加载的模块?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在Angular2组件中使用Plupload,并从CDN访问Plupload JavaScript文件.我想要一个特定的组件,以便它不下载,如果不需要 – 我希望它在一个懒惰的模块.我该怎么做?

现在完全回答这个页面

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

>使用角度2和类型脚本的Plupload示例
>如何懒惰从角色2中的CDN加载脚本
>如何在延迟加载的模块中使用Plupload的示例
>如何在角度2中使用懒惰的脚本

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

解决方法

以下是从CDN加载Plupload时,您需要做什么来创建延迟加载的Plupload功能的概述:

>当需要该功能(例如用户单击按钮或访问页面时),动态地添加< script>标记页面以从CDN加载Plupload库.
>等到库加载才能继续(或者你可以得到一个“plupload is undefined”错误).
>在您的一个角度模板中显示与Plupload交互的UI.在最简单的形式中,此UI包含两个按钮:“选择文件”和“上传文件”.
>初始化Plupload并将其连接到UI.

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

请注意以下几点:

>关于#2.检查Plupload是否完成加载的更好方法是轮询全局命名空间以存在plupload变量.只要window.plupload不存在,这意味着库尚未加载,我们不应该继续.为了简单起见,我的代码只等了一秒钟,继续进行.
> 4号可以证明有点棘手. Plupload大量使用直接DOM访问将其连接到HTML的API(例如document.getElementById(‘filelist’)).这是Angular不鼓励的事情,你应该尽可能避免.更具体地说,直接的DOM访问用于以下位置:

>告诉Plupload哪个DOM元素应该触发“选择文件”对话框(他们称之为browse_button配置选项).为此,我无法避免直接的DOM引用,我使用@ViewChild装饰器来抓住“选择文件”按钮.
>在模板中显示所选文件.为此,我将Plupload语法转换为常规角度语法.我将所选文件推送到一个名为fileList的类属性中,该属性使用标准* ngFor在模板中显示.
>“上传文件”按钮可触发实际上传的一些代码,并刷新用户界面以显示上传进度.再次,我使用事件绑定和数据绑定将其转换为常规角度语法.

如果您有任何问题,请告诉我们.

猜你在找的JavaScript相关文章