2016-09-06 3 views
5

は、私はこのようにインポートして使用してjQueryの範囲スライダウィジェットがあります。Angular 2 Webpackアプリでjquery UIのパンチをインポートするには?

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のタッチをインポート:明らか

TypeError: Cannot read property 'prototype' of undefined 

それが見つけることができません。

declare var jQuery: any; 

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

けどと、それエラーjQueryとjQuery UI。しかし、インポートされたjQueryがグローバルスコープにないときに、どのようにjQueryにタッチパンチを渡すのですか?

私のプロジェクトにはthis定型文が使用されています。

+0

これで運がいいですか?私は今この1つと苦労しています... –

+0

残念ながら、私はモバイルタッチイベントをサポートする代わりにhttp://ionden.com/a/plugins/ion.rangeslider/を使いました。 – Chyngyz

答えて

1

これは、(代わりにスライダーが、同じ考え方のソート可能)私の仕事:

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

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

ザ・は必要はなく、最後にインポートが重要です。インポートを使用すると、ウィンドウ上のjQueryグローバルを設定するコードは、他のものよりも前にインポートが実行されてから、タッチ・パンチ・インポート後に実行されます。

関連する問題