web-dev-qa-db-ja.com

angular 2のJavaScriptでjQueryを使用する方法

    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'
      });
    }
  }

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

jquerytypescriptangular
15
Buddhika Kulathilaka

私の意見では、もしあなたがそれを正しく行い、それを最小限に抑えるなら、あなたはそれで行くべきです。

  1. プロジェクトにjQuery Typingsをインストールします：tsd install jQuery
  2. スクリプトタグ（または他のローダー...）でjQueryをロードします
  3. JQueryプラグインをAngular 2ディレクティブでラップします

例：

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

このプランカーを検討してください：

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

しない：

  • DOM操作には使用しないでください。Angular way ...
  • AJAX呼び出しには使用しないでください。Angular方法があります...
  • アニメーションには使用しないでください、ngAnimationが来ています...
21
Vlado Tesanovic

この問題を解決するために私がすること：

ライブラリは@types/をサポートしていないため、ドキュメントの読み込み時にライブラリを読み込む必要があります（つまり、ドキュメントのスクリプトタグにライブラリを追加する必要があることを意味します）

  1. npm install jquery --saveを実行します

  2. angular-cli.jsonのscriptsまたはstylesにjs/cssファイルを追加

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

サポートされるライブラリ@types/の場合、npm install @types/jquery --save-devを実行するだけです

ライブラリを使用するには、注釈の前にdeclare var jQuery: any;を追加します@Directiveまたは@Componentを使用してライブラリを使用します

P/S：私はプロジェクトでangular-cliをwebpackと使用しますが、systemjsとは異なる場合があります

7
Duy Tran

JQuery TypeScriptライブラリをインストールしたら、この方法で参照します

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

次に、必要なインポートを行います

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! ^_^");
  }
}
7
Saurabh

JQuery TypeScript定義がどこにあるかを伝える必要があります。これは、次のようにタイピングを入力するtypings.d.tsファイルで実行できます。

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

または、ノードを介してタイピングをインストールし、構成にそれを自動的にロードさせることができます。これは、angular-cliが行うことです。

その後、Angular2でjQueryを使用するには、基本的なメカニズムを理解する必要があります。 Angular2には独自のdom表現があり、jQueryはこのdomを操作します。だから、人々は「Angular2でjQueryを使用しないでください」と言うのです。間違いです。 Angular2には、この問題の解決策が付属しています。それを呼び出します ControlValueAccessor 。これの目標は、jQueryプラグインがDOMを変更するときにangularを警告し、DOMを変更するときにプラグインに通知するangular.

これを日付選択カレンダーの例を通して説明しましょう。

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メソッドです。そしてregisterOnChangeを使用すると、プラグインがDOMに変更を加えたことをAngular2に通知できます。

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

タイピングを見つけるには、 DefinitlyTyped GitHubを使用できます。これは、多くのjsライブラリのタイピング定義のリポジトリです。

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

AngularコンポーネントとjQueryを任意の価格で結び付けないでください

  1. <script>タグでjQueryをロードします。
  2. JQueryドキュメント準備ハンドラーを追加します。
 
 $（ 'document'）。ready（（function（$）{
 
 return function（）{
 
 // DOMの準備が整い、$はjQuery 
 
への参照です// $ 
 
}; 
 
}）（jQuery））;

長所：

  • 角度コンポーネントにはjQueryの依存関係がありません。
  • そのようなコンポーネントのテスト、保守、再利用が簡単になります。
  • jQueryコードは分離されています。

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

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

1
John Smith

次のように使用できます：

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