如何在Angular 2 Webpack应用程序中导入jquery ui touch punch？

发布时间：2020-12-17 07:15:04 所属栏目：安全来源：网络整理

导读：我有jQuery范围滑块小部件,我导入和使用如下： declare var jQuery: any;import 'jquery-ui/ui/widgets/slider';import 'jquery-ui/ui/widgets/mouse'; 并像这样使用它： jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..}); 我的滑

我有jQuery范围滑块小部件,我导入和使用如下：

declare var jQuery: any;

import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';

并像这样使用它：

jQuery(this.elementRef.nativeElement).find('#range-slider').slider({..});

我的滑块工作正常.

问题是我需要启用移动触摸的滑块,所以我导入了jQuery UI Touch Punch：

declare var jQuery: any;

import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/ui/widgets/mouse';
import 'jquery-ui-touch-punch';

但它错误：

TypeError: Cannot read property 'prototype' of undefined

显然它无法找到jQuery和jQuery UI.但是,当导入的jQuery不在全局范围内时,如何将jQuery传递给触摸？

我为我的项目使用this样板.

解决方法

这对我有用(可排序而不是滑块,但同样的想法)：

import * as $from 'jquery';
import 'jquery-ui/ui/widgets/sortable';

(window as any).jQuery = $;
require('jquery-ui-touch-punch');

要求而不是最后导入是很重要的.如果使用导入,那么在触摸打孔导入之后,在窗口上设置jQuery全局的代码将不会运行,因为导入在其他所有内容之前运行.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!