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


85

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

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

ここに画像の説明を入力してください

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

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

私にお知らせください。

前もって感謝します!


1
コンポーネントでラップします:hackernoon.com/…この観点からはng2とng4の間に違いはありません。
Razvan Dumitru 2017年

回答:


160

はい、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>

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


1
出来た!!jquery-uiのような拡張プラグインをどのように使用しますか?
Tushar 2017年

1
解決済み:npm install jquery && types install dt〜jquery --global --save
Johannes

@Johannesはタイピングのためにドキュメント活字体を参照typescriptlang.org/docs/handbook/declaration-files/...microsoft.github.io/TypeSearch
アーヴィンLlojku

4
@ Jota.Toledoどうやってやるべきだと思いますか?それを行う正しい方法についての追加情報はありますか?
ルーカスメディナ

3
@ Jota.Toledoそれをangular-cli.jsonに追加するという意味ですか?それは本当に実用的なようです:)アドバイスをありがとう
ルーカスメディナ

190

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

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


11
またadd declare var jquery:any; declare var $ :any;、.tsファイルを忘れないでください。

19
@Norxの手順には、タイプのインストールが含まれています。これは、回線が不要であることを意味します。
salbahra 2017年

5
これを行うと、ビルドエラーが発生します。それは私のコードでエラーを与えるものではありませんので、私は、jQueryの3.2.1はタイプでインストールされているが、私はまだビルドエラーは述べます:Cannot find name '$'
Grungondola

1
@Grungondolaはdeclare const $: any;、@ ...デコレータの上に追加します。
Ervin Llojku 2017年

これはAngularのzone.jsでうまく機能しますか?
Wolf359 2017年

34

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

}

27

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

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

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

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

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

1
ファイルでCannot find name 'jQuery'宣言していない場合、このエラーが発生し.tsます。したがって、誰かがこの問題に直面した場合、彼はそれらを宣言する必要があります。
アムル

私は過去に、TSコンパイラに文句を言わないようにするために前述のインポートステートメントが必要だったという問題がありました。ただし、最近パッケージを更新したため、これらのインポートステートメントによってサードパーティのプラグインが定義されなくなりました。ここに私の現在の構成は次のとおりです。角度のバージョン:4.4.7は、@角度/ CLI @ 1.7.4 jquery@3.3.1 typescript@2.3.4
nthaxis

13

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


私はあなたが指摘することを理解しています。しかし、DOMにアクセスして角度を変更する方法。たとえば、$( '。js-eachoption [data-id =' + parentId + ']')。closest( '。eachLevel')。after(html); 角度だけでこれを行う方法。
Pradeep 2018年

3
@Pradeep in Angularでは、通常、ルートhtmlタグからDOM内の要素の検索を開始しませんが、それも可能です(コンポーネント内のDOCUMENTまたはWINDOWを参照することにより)。モジュール化(Angularの目的)では、親要素から子要素のみを操作する方法でアプリを構築する必要があります。長期的には、このような階層的な依存関係により、コードの開発と保守がはるかに簡単になります。したがって、現在のコンポーネントのホストDOM要素、またはViewChildまたはContentChildとその子のみを操作するようにしてください。
フィル

@Pradeepしたがって、要素(constructor(private renderer: Renderer2, private el: ElementRef) {})への参照を取得すると、その子をフィルタリングするか、nativeElement-Propertyにアクセスして要素を直接操作できますngOnInit() { this.renderer.addClass(this.el.nativeElement, 'wild'); }。ここではより多くのあなたを伝えるためにどのようにチュートリアルでは、次のとおりです。alligator.io/angular/using-renderer2
フィル・

@Pradeepは、renderer2が唯一のオプションではないことに注意してください。Angularでは、テンプレートからDOMを直接操作できます。例えば、現在のコンポーネントのテンプレート内のDOM要素を簡単に扱うことができ*ngIf*ngForカスタム(あなたによって作られた)指令、パイプやCSSのために、ngClass[style.background][class.myCustomCssClass]。さらにヘルプが必要な場合:angular.io/tutorial/toh-pt2
Phil

8

これを試して:

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

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

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

および.tsファイル内:

declare var $: any;

1

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

npm install --save @types/jquery@latest

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


1

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

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

1

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

  ]
};

0

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

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


0

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

ステップ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による自動暗示をサポートします


-3
ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.