[解決済み] Angular 4でjQuery Pluginを使うには?
2023-04-27 11:47:03
質問
angularプロジェクトでレンジスライダーを使いたいのですが、angular4で利用可能なモジュールを1つ使ってみました。
コンパイル中は正常に動作するのですが、デプロイのためにビルドしようとすると、以下のエラーがスローされます。
angularプロジェクトで直接jQueryプラグインを使用するオプションを確認しましたが、Angular 2で行うためのオプションしか出てきません。
Angular 4でjQueryプラグインを使う方法はないのでしょうか?
教えてください。
よろしくお願いします。
どのように解決するのですか?
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 = 'angular 4 with jquery';
toggleTitle(){
$('.title').slideToggle(); //
}
}
そして、このコードを対応するhtmlファイルに次のように使用します。
<h1 class="title" style="display:none">
{{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>
これでうまくいくでしょう。ありがとうございます。
関連
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jquery mobileでページ中央のグリッド表示
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] jQueryでチェックボックスの値を取得する
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み] jQueryを使用して要素の型を検索する
-
[解決済み] jQueryのn番目の要素を取得する方法
-
[解決済み] Jqueryのコードはヘッダーとフッターのどちらに入れるべきですか?