1. ホーム
  2. jquery

[解決済み] 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>

これでうまくいくでしょう。ありがとうございます。