AngularでjQueryを使用するには？

誰でもjQueryの使い方を教えてもらえますかしてアンギュラ？

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

クラスやIDを操作するような回避策があることを知っていますDOM要素のに、よりクリーンな方法を望んでいます。

Angular2のjQueryを使用すると、ng1に比べて簡単です。TypeScriptを使用している場合は、最初にjQuery typescript定義を参照できます。

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitionsはany、$またはのタイプとして使用できるため、必要ありません。jQuery

角度コンポーネントでは@ViewChild()、ビューを初期化した後、次を使用してテンプレートからDOM要素を参照する必要があります。nativeElementこのオブジェクトプロパティをてjQueryに渡すことで。

JQueryStaticとして宣言$（またはjQuery）すると、jQueryへの型付き参照が提供されます。

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

この例では、plunkerで提供されています：http://plnkr.co/edit/Nq9LnK?p=preview

tslintはchosen$のプロパティではないことを報告します。これを修正するには、カスタム* .d.tsファイルのJQueryインターフェイスに定義を追加します

interface JQuery {
    chosen(options?:any):JQuery;
}    

なぜ誰もがそれをロケット科学にしているのですか？bodyタグなどの静的要素にいくつかの基本的なことを行う必要がある他の人は、次のようにしてください：

1. index.htmlでscript、jquery libへのパスを含むタグを追加します。場所は関係ありません（このように、IE条件タグを使用して、IE9以下のjqueryの下位バージョンをロードすることもできます）。
2. あなたにはexport componentブロックコードを呼び出す機能を持っている：$("body").addClass("done");Normalyこれは、そうちょうどこの.TSファイル内のすべてのインポート後に、宣言エラーが発生追加しdeclare var $:any;、あなたが行ってもいいです！

これは私のために働いたものです。

ステップ1-まず最初に

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

ステップ2-インポート

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#UPDATE- Feb - 2017

最近、私は、コードを書いているES6の代わりに、typescriptとのことだimportなし* as $の中でimport statement。これは今のように見えます：

import $ from 'jquery';
//
$('#elemId').width();

幸運を。

これで、非常に簡単になりました。Angular2コントローラー内で任意のタイプのjQuery変数を宣言するだけで、それを行うことができます。

declare var jQuery:any;

これをimportステートメントの直後とコンポーネントデコレータの前に追加します。

ID XまたはClass Xの要素にアクセスするには、次のようにします。

jQuery("#X or .X").someFunc();

簡単な方法：

1.スクリプトを含める

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2.宣言する

my.component.ts

declare var $: any;

3.使用

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

次の簡単な手順に従ってください。それは私のために働いた。混乱を避けるために、新しい角度2アプリから始めましょう。Angular CLIを使用しています。まだインストールしていない場合は、インストールしてください。 https://cli.angular.io/

ステップ1：デモ版のAngular 2アプリを作成する

ng new jquery-demo

任意の名前を使用できます。cmdの下で実行して、機能しているかどうかを確認します（今、cdコマンドを使用していない場合は、「jquery-demo」を指していることを確認してください）。

ng serve

「app works！」が表示されます。ブラウザ上。

ステップ2：Bower（Web用のパッケージマネージャー）をインストールする

このコマンドをcliで実行します（cdコマンドを使用しない場合は、「jquery-demo」を指していることを確認してください）。

npm i -g bower --save

bowerのインストールが成功したら、以下のコマンドを使用して「bower.json」ファイルを作成します。

bower init

入力を要求します。デフォルト値が必要な場合はEnterキーを押し、最後に「よろしいですか？」と尋ねられたら「はい」と入力します。

これで、フォルダー「jquery-demo」に新しいファイル（bower.json）が表示されます。あなたはhttps://bower.io/でより多くの情報を見つけることができます

ステップ3：jqueryをインストールする

このコマンドを実行する

bower install jquery --save

jqueryインストールフォルダーを含む新しいフォルダー（bower_components）を作成します。これで、jqueryが 'bower_components'フォルダーにインストールされました。

ステップ4：「angular-cli.json」ファイルにjqueryの場所を追加する

「angular-cli.json」ファイル（「jquery-demo」フォルダにあります）を開き、「スクリプト」にjqueryの場所を追加します。次のようになります。

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

ステップ5：テスト用の簡単なjqueryコードを記述する

「app.component.html」ファイルを開き、単純なコード行を追加します。ファイルは次のようになります。

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

ここで「app.component.ts」ファイルを開き、jquery変数宣言と「p」タグのコードを追加します。ライフサイクルフックngAfterViewInit（）も使用する必要があります。変更を加えると、ファイルは次のようになります。

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

ここで、「ng serve」コマンドを使用して角度2アプリを実行し、テストします。うまくいくはずです。

ライフサイクルフックngAfterViewInit（）を実装して、DOM操作を追加できます

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

angular2はビューをリサイクルする可能性があるため、ルーターを使用するときは注意してください。DOM要素の操作は、afterViewInitの最初の呼び出しでのみ行われるようにする必要があります。

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

私はそれをより簡単な方法で行います-最初にコンソールにnpmでjqueryをインストールしnpm install jquery -S、次にコンポーネントファイルに書き込むだけlet $ = require('.../jquery.min.js')です。ここにいくつかの私のコードからの完全な例：

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

teplateで私は例えば持っています：

<div class="departments-connections-graph">something...</div>

編集

代わりに、使用する代わりに：

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

使用する

declare var $: any;

そして、あなたのindex.htmlに入れてください：

<script src="assets/js/jquery-2.1.1.js"></script>

これは、jqueryをグローバルに1回だけ初期化します-これは、たとえば、ブートストラップでモーダルウィンドウを使用する場合に重要です...

ステップ1：コマンドを使用する：npm install jquery --save

ステップ2：あなたは単に次のように角度をインポートすることができます：

'jquery'から$をインポートします。

それで全部です 。

例は：

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

// jqueryのインストールnpm install jquery --save

// jqueryの型定義をインストールするtypings install dt~jquery --global --save

//指定されたとおりにjqueryライブラリをビルド構成ファイルに追加します（ "angular-cli-build.js"ファイル内）

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

//ビルドを実行してjqueryライブラリをビルドに追加します ng build

//相対パス構成を追加します（system-config.js内） /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

//コンポーネントファイルにjqueryライブラリをインポートします

import 'jquery';

以下は私のサンプルコンポーネントのコードスニペットです

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

angular-cliを使用すると、次のことができます。

1. 依存関係をインストールします。

   npm install jquery --save

   npm install @ types / jquery --save-dev

2. ファイルをインポートします。

   .angular-cli.jsonファイルの「script」セクションに「../node_modules/jquery/dist/jquery.min.js」を追加します

3. jqueryを宣言します。

   tsconfig.app.jsonの「types」セクションに「$」を追加します

公式の角度付きcli docの詳細を確認できます

Angular2（4）でJqueryを使用するには

これらの設定に従ってください

JqueryとJuqryの型定義をインストールする

jqueryインストールの場合 npm install jquery --save

jqueryタイプの定義インストールの場合 npm install @types/jquery --save-dev

そして単にjqueryをインポートする

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Angular Cliの使用

 npm install jquery --save

スクリプト配列の下のangular.json

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

jQueryを使用するには、jQueryを使用するコンポーネントに次のようにインポートするだけです。

たとえば、ルートコンポーネントでjQueryをインポートして使用する

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

私は馬鹿なので、いくつかの実用的なコードがあるといいと思いました。

また、angular-protractorの Angular2タイピングバージョンではjQuery$に問題があるため、受け入れられたトップの回答ではクリーンなコンパイルができません。

これが私が働いているべきステップです：

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

my.component.tsの内部

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

書くだけ

declare var $:any;

すべてのインポートセクションの後、jQueryを使用して、jQueryライブラリをindex.htmlページに含めることができます

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

それは私のために働いた

1）コンポーネントのDOMにアクセスする。

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

次の方法でjQueryを含めることができます。2）angular2が読み込まれる前にjqueryファイルをindex.htmlに含めます

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

次の方法でJqueryを使用できます。ここでは、JQuery Ui日付ピッカーを使用しています。

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

この仕事は私にとって。

この点は私の前に作成されたすべての投稿で言及されているため、jqueryのインストールはスキップします。したがって、jqueryはすでにインストールされています。このようにコンポーネントにtをインポートする

import * as $ from 'jquery';

動作しますが、サービスを作成してこれを行う別の「角度のある」方法があります。

ステップいいえ。1：jquery.service.tsファイルを作成します。

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

ステップ。番号。2：app.module.tsにサービスを登録する

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

ステップいいえ。3：サービスをコンポーネントmy-super-duper.component.tsに挿入します

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

誰かが両方の方法の長所と短所を説明できれば、私は非常に感謝します：DI jquery a service vs. import * as $ from 'jquery';

私が見つけた最も効果的な方法は、ページ/コンポーネントコンストラクター内で時間0のsetTimeoutを使用することです。これで、Angularがすべての子コンポーネントのロードを完了した後の次の実行サイクルでjQueryを実行します。他のいくつかのコンポーネントメソッドを使用することもできますが、setTimeout内で実行すると、すべてが最善の方法で動作します。

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

これが私のために働いたものです-ウェブパックを使ったAngular 2

$タイプとして宣言しようとしましたanyが、取得しているJQueryモジュールを使用しようとするたびに（たとえば）$(..).datepicker()、関数ではありません

Jqueryを自分のvendor.tsファイルに含めているので、次のコマンドを使用してコンポーネントにインポートしました。

import * as $ from 'jquery';

Jqueryプラグイン（bootstrap-datetimepickerなど）を使用できるようになりました

また、 "InjectionToken"を使用してそれをインポートすることもできます。ここで説明するように：タイプ定義なしでAngular / TypescriptでjQueryを使用する

jQueryグローバルインスタンスを挿入して使用するだけです。このため、型の定義や型付けは必要ありません。

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

app.module.tsで正しく設定されている場合：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

コンポーネントでそれを使い始めることができます：

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

公式ドキュメントとしてのグローバルライブラリのインストールはこちら

1. npmからインストール：

   npm install jquery --save

2. 必要なスクリプトファイルをスクリプトに追加します。

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

サーバーを実行している場合はサーバーを再起動します。サーバーがアプリで機能しているはずです。

単一コンポーネント内で使用したい場合はimport $ from 'jquery';、コンポーネント内で使用してください

その他はすでに投稿されています。ただし、ここでは簡単な例を示します。これにより、一部の新規参入者を助けることができます。

ステップ-1：index.htmlファイル参照jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

ステップ-2：ボタンをクリックするとdivを表示または非表示にすることを想定します。

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

ステップ3：コンポーネントファイルで、インポートは$を次のように宣言します。

declare var $: any;

以下のような関数を作成するより：

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

最新のAngularとJQueryで動作します

まず、次のようにnpmを使用してjQueryをインストールします。

npm install jquery — save

次に、Angular CLIプロジェクトフォルダーのルートにある./angular-cli.jsonファイルに移動し、scripts：[]プロパティを見つけて、jQueryへのパスを次のように含めます。

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

jQueryを使用するには、jQueryを使用するコンポーネントにインポートするだけです。

import * as $ from 'jquery';
(or)
declare var $: any;

特に2行目で、jQueryを使用してクリックでdivをアニメーション化する以下のコードを見てください。jQueryからすべてを$としてインポートしています。

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

jqueryをインストールする

ターミナル$ npm install jquery

（ブートストラップ4の場合...）

ターミナル$ npm install popper.js

ターミナル$ npm install bootstrap

次に、importステートメントをに追加しapp.module.tsます。

import 'jquery'

（ブートストラップ4の場合...）

import 'popper.js'
import 'bootstrap'

これで<SCRIPT>、JavaScriptを参照するためのタグは不要になります。

（引き続き使用するCSSは、で参照する必要がありますstyles.css）

@import "~bootstrap/dist/css/bootstrap.min.css";

Angularを使用する場合は、jqueryライブラリを使用しないようにしてください。角度フレームワーク用に作成された機能とライブラリを使用してみてください。find（）、html（）、closest（）などのjquery関数を使用したい場合は、純粋なjsを使用することをお勧めします。例：querySelector（）、innerHTML、parentElementなど...