web-dev-qa-db-ja.com

Angular 2でjQuery UIを使用する方法

アプリにドラッグアンドドロップ機能を組み込みたいので、jQuery UIをAngular 2プロジェクトにインポートすることにしました。

最初に、以下を実行してjQuery自体をインポートすることから始めました。

_import { ElementRef } from '@angular/core';
declare var jQuery:any;

ngOnInit() {
    jQuery(this._elRef.nativeElement).find('ul.tabs').tabs();
}
_

これは初期化に最適です。しかし、.draggable()関数を実行しようとすると、次のエラーが表示されます。

jQuery(...).draggable is not a function

この作業を行うにはどうすればよいですか？私は多くのアプローチを読みましたが、それらのすべては、私が使用していないAngular-cliの現在のバージョンではsystem-jsを使用しました。 Angular 2アプリでjQueryを使用することは実際には最良のアプローチではないことを知っていますが、ユーザーがドラッグ可能なウィジェットをドロップできるグリッドが必要です。

何か提案があれば、それは完璧です！ありがとう！

javascriptjqueryjquery-uiangular
12
Georgi Arnaudov

次の手順を実行することで、それを機能させることができました。

  1. npmアンインストールjquery jquery-ui
  2. npm cache clean
  3. npm install jquery jquery-ui

  4. Angular-cli.jsonでは、scriptsオブジェクトにjqueryおよびjquery-uiパスを追加しました。ここに彼らが見えるものがあります：

    "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jquery-ui/jquery-ui.js" ]

これらの手順を完了した後、それは魅力のように機能しました。それが問題を抱えている人を助けることを願っています。

9
Georgi Arnaudov

JqueryUIでangular2を使用します。 jqueryとjqueryUIをインポートする必要があります

//SystemJS

System.config({
    defaultJSExtensions: true,
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        'app':  'app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        // other libraries
        'rxjs': 'npm:rxjs',

        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
        jqueryui: 'npm:jqueryui/jquery-ui.min.js',

        material: 'npm:material-design-lite/dist/material.min.js'
    },
    packages: {
        app: { main: 'main', format: 'register', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
});

///////////////////////////////

// Angular2コンポーネント

import $ from 'jquery';
import 'jqueryui';
2
vidalsasoon

npm install jquery jquery-ui --save

npm install @ types/jquery --save-dev

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/selectable.js';

使用法：

ngAfterViewInit(): void {
    ($('.selectable') as any).selectable({..});
}

sassを使用している場合は、style.scssにスタイルシートをインポートすることもできます

@import '../node_modules/jquery-ui/themes/base/selectable.css';

または

.angular-cli.jsonで

"styles": [
      "../node_modules/jquery-ui/themes/base/selectable.css",
      "./styles.scss"
],
1
Ivan Carmenates García

選択している要素がまだ利用できない可能性があるため、セレクタが要素を見つけられません。

おそらく、ngAfterViewInitライフサイクルフック（ngOnInitに似ています）で.draggable（）を呼び出して、アタッチする前にDOM要素が存在することを確認する必要があります。

1
chrispy