角度2のjavascriptでjQueryを使用する方法

Question

import {Component, ElementRef, OnInit} from 'angular2/core'; 
    declare var jQuery:any; 
    @Component({ 
     selector: 'jquery-integration', 
     templateUrl: './components/jquery-integration/jquery-integration.html' 
    }) 
    export class JqueryIntegration implements OnInit { 
     elementRef: ElementRef; 
     constructor(elementRef: ElementRef) { 
     this.elementRef = elementRef; 
     } 
     ngOnInit() { 
     jQuery(this.elementRef.nativeElement).draggable({ 
     containment:'#draggable-parent' 
     }); 
    } 
    } 

jQueryを上記のAngular2のTypeScriptで使用することはできますか？ JavaScriptでjQueryをAngular2で使用するにはどうすればよいですか？

Answer 1

私の意見では：あなたが正しいことをし、あなたがそれを最小限に保つなら、あなたはそれについて行くべきです。

1. プロジェクトでjQueryのタイピングをインストールします。TSDのスクリプトタグでjQueryの
2. ロードのjQueryをインストール（または他のローダー...）
3. 角度2指令

例のいずれかのjQueryプラグインをラップ：

@Directive({ 
    selector: "[sm-dropdown]" 
}) 
export class SMDropdown { 
    constructor(el: ElementRef) { 
    jQuery(el.nativeElement).dropdown(); 
    } 
} 

このPlunker考えてみましょう：

https://plnkr.co/edit/MMNWGh?p=preview

ないでください：

• ...アンギュラ方法がある、DOM操作のためにそれを使用しないでくださいAJAXのためにそれを使用しないでください呼び出し、角度がありますway ...
• アニメーションには使用しないでください。ngアニメーションが来ています...

Answer 2

あなたはjQueryのはtypescriptですライブラリがインストールされていたら、必要に応じて輸入

import {Component, AfterViewInit} from 'angular2/core'; 

今すぐ

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/html/app.component.html' 
}) 

export class AppComponent implements AfterViewInit { 
    ngAfterViewInit() { 
    // Your jQuery code goes here 
    $('#here').text("HALLO! ^_^"); 
    } 
} 

Answer 3

クラスを作成します次に、このように

///<reference path="../typings/jquery/jquery.d.ts" /> 

をそれを参照この問題を解決するために私が行うこと：

ライブラリについて@types/サポートおよびライブラリは、文書がscriptsにJS/CSSファイルを追加

1. 実行npm install jquery --save

2. （平均ライブラリは、文書のスクリプトタグに追加する必要があります）ロード時にロードする必要はありません。

   "scripts": ["../node_modules/path to file", "./assets/path to file"]

のよう angular-cli.jsonのかライブラリの

だけの注釈@Directiveか@ComponentはLIB

P/Sを使用する前にdeclare var jQuery: any;を追加し、ライブラリを使用するにnpm install @types/jquery --save-dev

を実行し、@types/をサポート：多分違う、私は私のプロジェクトでwebpackでangular-cliを使用systemjs

Answer 4

であなたは、任意の価格

でjQueryを使って角度成分を結ぶべきではありません
1. <script>タグでjQueryをロードします。
2. jQueryドキュメントレディハンドラを追加します。賛否

 

    $('document').ready((function($) { 

     return function() { 

     // DOM is ready and $ is a reference to jQuery 

     // It's time to things done using $ 

     }; 

    })(jQuery)); 

：

• 角度成分は、jQueryの依存関係から自由です。
• このようなコンポーネントをテストし、維持して再利用することが簡単になります。
• jQueryコードが分離されています。しかし

、あなたはサービスやディレクティブを使用するコンポーネント内のjQueryを使用する必要がある場合。

部分ビューのロードに問題がある場合は、ドキュメントノードとjQueryウィンドウのロードハンドラでjQueryイベントハンドラを使用します。

Answer 5

jQueryのtypeScript定義がどこにあるのかを知る必要があります。これはタイピングで行うことができます。あなたはこのようなあなたのタイピングを入れTSファイル：

///<reference path="../typings/jquery/jquery.d.ts" /> 

それとも、ノードを介してタイピングをインストールして、設定が自動的にロードさせることができます。これは、角張っていることです。

その後、Angular2でjQueryを使用するには、基本的なメカニズムを理解する必要があります。 Angular2は独自のDOM表現を持ち、jQueryはこのDOMを操作します。そのため、人々は「Angular2でjQueryを使用しないでください」と言っています。間違いです。 Angular2にはこの問題の解決策があります。それはControlValueAccessorと呼ばれます。これの目的は、jQueryプラグインがDOMを変更するときに角度を警告することです。また、DOMを変更するときにプラグインに通知するようにします。

日付ピッカーカレンダーの例を使って説明します。ここ

import { Directive, ElementRef, OnInit, AfterViewInit, Input, forwardRef, OnDestroy } from '@angular/core'; 
import { Moment } from 'moment'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 


const DATE_PICKER_VALUE_ACCESSOR = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => FnCalendarDirective), 
    multi: true, 

}; 

@Directive({ 
    selector: '[fn-calendar]', 
    providers: [DATE_PICKER_VALUE_ACCESSOR], 
}) 
export class FnCalendarDirective implements OnInit, AfterViewInit, ControlValueAccessor, OnDestroy { 


    @Input() format: string = 'DD/MM/YYYY HH:mm'; 
    @Input() showClose: boolean = true; 
    @Input() sideBySide: boolean = false; 
    @Input() ngModel; 

    private onTouched =() => { }; 
    private onChange: (value: string) => void =() => { }; 

    constructor(private el: ElementRef) { 
    } 

    ngOnInit() { 

    } 

    ngAfterViewInit() { 
    $(this.el.nativeElement).datetimepicker({ 
     locale: 'fr', 
     sideBySide: this.sideBySide, 
     format: this.format, 
     showClose: this.showClose, 
     icons: { 
     time: 'fa fa-clock-o', 
     date: 'fa fa-calendar', 
     up: 'fa fa-chevron-up', 
     down: 'fa fa-chevron-down', 
     previous: 'fa fa-chevron-left', 
     next: 'fa fa-chevron-right', 
     today: 'fa fa-bullseye', 
     clear: 'fa fa-trash', 
     close: 'fa fa-times' 
     }, 
    }).on('dp.change', event => { 
     let date: Moment = (<Moment>(<any>event).date); 
     if (date) { 
     let value = date.format(this.format); 
     this.onChange(value); 
     } 
    }); 
    this.writeValue(this.ngModel); 
    } 

    writeValue(date: string) { 
    $(this.el.nativeElement).datetimepicker().data('DateTimePicker').date(date); 
    } 

    registerOnChange(fn: any) { 
    this.onChange = fn; 
    } 

    registerOnTouched(fn: any) { 
    this.onTouched = fn; 
    } 

    ngOnDestroy() { 
    $(this.el.nativeElement).datetimepicker().data('DateTimePicker').destroy(); 
    } 
} 

重要なものは、Angular2は変更が生産しているあなたのjQueryプラグインを通知してみましょうwriteValue方法です。そして、あなたのプラグインがDOMを変更することをAngular2に通知するregisterOnChange。

結論として、jQueryを使用する鍵は、jQueryプラグインをディレクティブ内にラップし、プラグインとAngular2間の通信を処理するためにCustomValueAccesorを実装することです。

タイピングを見つけるには、DefinitlyTyped jitライブラリのlotからの型定義のリポジトリであるGitHubを使用できます。

[1]: http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html 

Answer 6

我々は次のようにのように使用することができます。

var jq=require('./jquery.min.js'); 
..... 
export class AppComponent{ 
    ngOnInit(){ 
    jq(); 
    console.log($('body')) // show:[body, prevObject: r.fn.init[1]] 
          //ok!normal operation! 
    } 
}