web-dev-qa-db-ja.com

JQuery Pluginと一緒に使用する方法 Angular 4？

AngularプロジェクトでRangeスライダーを使いたいのですが、Angular 4で利用可能なモジュールを1つ使ってみました。

コンパイル中は問題なく動作しますが、デプロイ用にビルドしようとすると、以下のエラーが発生します。

enter image description here

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

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

私にお知らせください。

前もって感謝します！

jqueryangular
81
SP-TY

はい、Angular 4と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 = 'abgular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

そして、このように対応するHTMLファイルのためにこのコードを使います：

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

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

154
GAURAV ROY

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

お役に立てれば！コーディングを楽しむ

186
Ervin Llojku

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

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

}
34
Govarthanan Venunathan

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

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

あなたはどこでもjQueryにアクセスできるはずです。

以下が動作するはずです。

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

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

Angularは、そのメモリ内にDOMの独自の表現を保持し、jQueryのようなクエリセレクタ（document.getElementById(id)のような関数）は使用しません。代わりに、すべてのDOM操作はRenderer2（およびbackground/framework-codeでそのRenderer2にアクセスする* ngForや* ngIfなどのAngularディレクティブ）によって行われます。自分でjQueryを使ってDOMを操作すれば、遅かれ早かれ...

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

あなたが本当にjQueryを（あなたが100％確実に捨てるであろういくつかのプロトタイプをアヒルテーピングするために）含みたいならば、私はそれをgoogleのCDNから得るよりnpm install --save jqueryであなたのpackage.jsonに少なくとも含めることを勧めます。

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

11
Phil

これを試して：

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

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

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

そしてあなたの.tsファイルで：

declare var $: any;
8
Bettaibi Nidhal

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

npm install --save @types/jquery@latest

私はこれと同じエラーを持っていたし、私はsolution.itのためにネットをサーフィンしている5日間は私のために働いていたし、それはあなたのために動作するはずです

1
Didi Pepple

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

npm install @types/lib-name --save-dev
1
Guaracy A. Lima

試してみてください - let $：anyを宣言してください。

または 'jquery/dist/jquery.min.js'から$として$をインポートします。ライブラリの正確なパスを指定する

0
Anshu Bansal

Webpackを使って provide itすることができます。それは自動的に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
David Dehghan