Angular 4でjQueryプラグインを使用する方法は？

Angularプロジェクトでレンジスライダーを使用したいので、Angular4で使用可能なモジュールを1つ使用してみました。

コンパイル中は正常に動作しますが、デプロイ用にビルドしようとすると、以下のエラーがスローされます。

AngularプロジェクトでjQueryプラグインを直接使用するオプションを確認しましたが、Angular2でそれを実行するためのオプションしか取得していません。

Angular 4でjQueryプラグインを使用する方法はありますか？

私にお知らせください。

前もって感謝します！

はい、Angular4でjqueryを使用できます

手順：

1）index.htmlタグの行の下に入れます。

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

2）以下のコンポーネントtsファイルで、次のようにvarを宣言する必要があります

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

そして、次のような対応するhtmlファイルにこのコードを使用します。

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

これはあなたのために働くでしょう。ありがとう

npmでjqueryをインストールする

npm install jquery --save

タイピングを追加する

npm install --save-dev @types/jquery

スクリプトをangular-cli.jsonに追加します

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

プロジェクトを構築して提供する

ng build

お役に立てれば！コーディングをお楽しみください

NPMを使用してjQueryをインストールする JqueryNPM

npm install jquery

jQuery宣言ファイルをインストールします

npm install -D @types/jquery

.ts内にjQueryをインポートする

import * as $ from 'jquery';

クラス内で呼び出す

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

@ types / jqueryをインストールしたときに、jQuery変数を宣言する必要はありません。

declare var jquery:any;   // not required
declare var $ :any;   // not required

どこからでもjQueryにアクセスできる必要があります。

以下が機能するはずです。

jQuery('.title').slideToggle();

AngularではjQueryを使用しないでください。可能ですが（この質問については他の回答を参照してください）、お勧めしません。どうして？

Angularは、そのメモリにDOMの独自の表現を保持し、document.getElementById(id)jQueryのようなクエリセレクター（のような関数）を使用しません。代わりに、すべてのDOM操作はRenderer2（およびバックグラウンド/フレームワークコードでそのRenderer2にアクセスする* ngForや* ngIfなどのAngularディレクティブ）によって行われます。jQueryを使用してDOMを自分で操作すると、遅かれ早かれ...

1. 同期の問題が発生し、画面から適切なタイミングで誤って表示されたり消えなかったりする
2. Angularの内部DOM表現はzone.jsとその変更検出メカニズムにバインドされているため、より複雑なコンポーネントでパフォーマンスの問題が発生します。したがって、DOMを手動で更新すると、アプリが実行されているスレッドが常にブロックされます。
3. 起源がわからない他の紛らわしいエラーがあります。
4. アプリケーションを正しくテストできない（Jasmineでは、要素がいつレンダリングされたかを知る必要があります）
5. AngularUniversalまたはWebWorkersを使用できない

本当にjQueryを含めたい場合（100％確実に破棄するプロトタイプをダックテープで貼り付けるため）、npm install --save jqueryGoogleのCDNから取得するのではなく、少なくともpackage.jsonに含めることをお勧めします。

TLDR：Angularの方法でDOMを操作する方法を学ぶには、最初に公式のヒーローツアーチュートリアルをご覧ください：https：//angular.io/tutorial/toh-pt2DOM階層の上位の要素にアクセスする必要がある場合（親またはdocument body）など他の何らかの理由ディレクティブのために*ngIf、*ngForカスタムディレクティブ、パイプなど他の角度のユーティリティは[style.background]、[class.myOwnCustomClass] Renderer2を使用し、あなたのニーズを満たしていない：https://www.concretepage.com/angular-2/angular-4 -renderer2-example

これを試して：

import * as $ from 'jquery/dist/jquery.min.js';

または、angular-cli.jsonにスクリプトを追加します。

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

および.tsファイル内：

declare var $: any;

あなたはそのようにあなたのjqueryタイピングバージョンを更新することができます

npm install --save @types/jquery@latest

私はこれと同じエラーが発生し、解決策を求めてネットサーフィンを5日間行ってきました。それは私にとってはうまくいき、あなたにとってもうまくいくはずです。

プロジェクト内だけでなく、プロジェクト内で他のライブラリを使用する必要がある場合-typescript--プロジェクト内だけでなく-angle-異なる、メソッド、タイプ、関数などの情報を持つtds（TypeScript宣言ファイル）を探すことができます。これはTypeScriptで使用でき、通常はインポートする必要はありません。varが最後のリソースであることを宣言する

npm install @types/lib-name --save-dev

webpackを使用して提供できます。その後、自動的にDOMが注入されます。

module.exports = {
  context: process.cwd(),
  entry: {
    something: [
      path.join(root, 'src/something.ts')
    ],
    vendor: ['jquery']
  },
  devtool: 'source-map',
  output: {
    path: path.join(root, '/dist/js'),
    sourceMapFilename: "[name].js.map",
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
    ]
  },
  resolve: {
    extensions: ['.ts', '.es6', '.js', '.json']
  },
  plugins: [

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),

  ]
};

使用してみてください-declarelet $：any;

または、*を$として 'jquery / dist /jquery.min.js'からインポートします。libの正確なパスを提供します

タイプスクリプトの解決策：

ステップ1：

npm install jquery

npm install --save-dev @types/jquery

ステップ2： Angular.jsonに追加：

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

またはindex.htmlに追加：

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

ステップ3： jqueryを使用する* .component.ts内

import * as $ from 'jquery';  // dont need "declare let $"

次に、javaScriptと同じようにjqueryを使用できます。このように、VScodeはTypescriptによる自動暗示をサポートします

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}