jQueryとAngular4を混在させる方法が異なります

Question

最近、Angular 4をいくつかのプロジェクトで取り上げたいと考えています（私はまだ多くの基本を学んでいるので、私の質問ははっきりと分かるかもしれません）。過去に私はDOM操作のほとんどのためにjQueryを使用していましたが、Angularを使用すると、Angularアプリケーション内でjQueryを使用すると非常に面倒な変更があります。

Angularプロジェクト内でjQueryを使用することに関する多くのStack Overflow投稿を読んだことがありますが、それらはすべてコンポーネントのtypescriptファイルからjQuery関数を書くことをお勧めします。 Angularはコンポーネントに基づいているため、これは意味があります。私の唯一の質問/懸念事項は、コンポーネント自体の外部でグローバルレベルのjQuery関数を作成する方法です。

たとえば、以前はjQuery関数を保持し、それらをhtmlファイル内で参照するjsファイルを作成しました。この例は、画像の視差関数です。別の視差画像に少し異なるスタイルを追加したいのであれば、私はこれをうまくやってjQueryを仕事に使うことができますが、今は例として、同じjQueryコードを使用する2つの異なる視差コンポーネントがあります。 ）方法は、jQueryコードを保持するグローバルなjsファイルを介して、異なるコンポーネント内から同じ関数を参照する方法ですか？

私は、関数を保持するファイル "xxxx.js"を作成し、それをindex.htmlファイルで参照させることができます。私は、私が記述したようなものが可能かどうか、そしてもしそうなら、最良のアプローチは何かを知りたいだけです。私は多分、依存性注入を使用することになり

Answer 1

、 アプローチは次のようになります。

1. は、関数全体のすべての共通の機能 を保持しているservicesファイルを作成します。
2. ターゲットコンポーネントでプロバイダとして使用します。
3. Dependancy injectionを使用すると、そのようなサービスのオブジェクトが作成され、自分のコンポーネントで使用されます。

は限り は、はい、それは可能である、とのアプローチとして「は、JSを作成し、index.htmlの中に含まれ、コンポーネント渡って使用します」。 私はそれをjsファイルである私のプロジェクトの外部ライブラリの1つに使用しました。手順は次のようになります。

1. コピーのsrc /資産/ JavaScriptでのjsファイル

2. が

3. のindex.htmlに

   <script src="assets/javascript/yourFile.js"></script> 
   

それらを追加コンポーネント前に、コンポーネントのセクション（に示すように、あなたのjs関数を宣言しますディレクティブ）：

declare var yourFunction: any; 

4. これで、ターゲットコンポーネントでこの機能を使用できます。

Answer 2

フレームワークを角度として使用すると、要素とそのイベントを操作し始めます。ページの終わりにスクリプトを1回だけ入力すると、イベントは現在の要素に適用されますが、角度を変更するとイベントは機能しなくなるため、Jqueryは慣れているので機能しません。

Jqueryは角度付きではお勧めできませんが、特定の傾斜したプラグインではまだ見つかっていない機能を利用するには、そのバインディングを作成する角度コンポーネントを作成することができますあなたが望む要素に適用することによってjquery呼び出しを行う必要があります。また、イベントのいくつかのタイプに対してアンバインドを実行することも、理想的です。

例：Example