AngularでjQueryを使用する方法
jQuery を Angular と共に使用する方法を誰かに教えてもらえますか。
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
DOM要素の class または id を前もって操作するなどの回避策があることは承知していますが、それを実行するためのよりクリーンな方法を望んでいます。
Angular 2からjQueryを使用するのは、ng 1と比較すると簡単です。 TypeScriptを使用している場合は、最初にjQuery TypeScript定義を参照できます。
tsd install jquery --save
or
typings install dt~jquery --global --save
$またはanyの型としてjQueryを使用できるので、TypescriptDefinitionsは必要ありません。
Angularコンポーネントでは、@ViewChild()を使用してテンプレートからDOM要素を参照する必要があります。ビューが初期化されたら、このオブジェクトのnativeElementプロパティを使用してjQueryに渡すことができます。
$（またはjQuery）をJQueryStaticとして宣言すると、jQueryへの型付き参照が得られます。
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;
@Component({
selector: 'ng-chosen',
template: `<select #selectElem>
<option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
</select>
<h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
@ViewChild('selectElem') el:ElementRef;
items = ['First', 'Second', 'Third'];
selectedValue = 'Second';
ngAfterViewInit() {
$(this.el.nativeElement)
.chosen()
.on('change', (e, args) => {
this.selectedValue = args.selected;
});
}
}
bootstrap(NgChosenComponent);
この例はplunkerで利用可能です： http://plnkr.co/edit/Nq9LnK?p=preview
tslintはchosenが$のプロパティではないと文句を言います、これを修正するためにあなたのカスタム* .d.tsファイルのJQueryインターフェースに定義を追加することができます
interface JQuery {
chosen(options?:any):JQuery;
}
なぜ誰もがそれをロケット科学にしているのですか？静的要素に基本的なことをする必要がある人、例えばbodyタグのために、これをするだけです：
- Index.htmlにjqueryライブラリへのパスを含む
scriptタグを追加します。場所は関係ありません（この方法では、IE9以下のjqueryの下位バージョンをロードするためにIE条件タグを使用することもできます）。 - あなたの
export componentブロックにあなたのコードを呼び出す関数があります：$("body").addClass("done");通常これは宣言エラーを引き起こすので、この.tsファイルのすべてのインポートの直後にdeclare var $:any;を追加してください、そしてあなたは行ってもいいです！
これは私のために働いたものです。
ステップ1 - まず最初に
// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery
ステップ2 - 輸入
// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();
// OR
// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();
#UPDATE - Feb - 2017
最近、私はTypeScriptの代わりにES6を使ってコードを書いていて、* as $の中でimport statementなしでimportを使うことができます。これは今のようになります：
import $ from 'jquery';
//
$('#elemId').width();
がんばろう。
非常に簡単になりました。Angular2コントローラ内で任意の型のjQuery変数を宣言するだけでそれを実行できます。
declare var jQuery:any;
Importステートメントの直後でコンポーネントデコレータの前にこれを追加してください。
ID XまたはクラスXの要素にアクセスするには、あなたがしなければならないだけです。
jQuery("#X or .X").someFunc();
簡単な方法：
1.インクルードスクリプト
index.html
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
2.宣言 -
my.component.ts
declare var $: any;
3. use
@Component({
selector: 'home',
templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
...
$("#myselector").style="display: none;";
}
これらの簡単な手順に従ってください。それは私のために働きました。混乱を避けるために新しいAngular 2アプリから始めましょう。私はAngularcliを使用しています。まだ持っていないのなら、インストールしてください。 https://cli.angular.io/ /
ステップ1：デモAngular 2アプリを作成します
ng new jquery-demo
あなたは任意の名前を使うことができます。 cmd以下で実行して動作しているか確認してください（cdコマンドを使用していない場合は、 'jquery-demo'を指していることを確認してください）。
ng serve
あなたは「アプリがうまくいく」ことを見るでしょう。ブラウザで。
ステップ2：Bowerをインストールする（Web用のパッケージマネージャ）
このコマンドをcliで実行します（cdコマンドを使用しない場合は、必ず 'jquery-demo'を指していることを確認してください）。
npm i -g bower --save
Bowerが正常にインストールされたら、以下のコマンドを使用して「bower.json」ファイルを作成します。
bower init
それは入力を求めます、あなたがデフォルト値が欲しいならばただすべてのためにエンターを押して、そしてそれがそれが "よさそう？
これで、フォルダ "jquery-demo"に新しいファイル（bower.json）が表示されます。あなたは/でより多くの情報を見つけることができます https://bower.io/ /
ステップ3：jqueryをインストールする
このコマンドを実行
bower install jquery --save
Jqueryインストールフォルダを含む新しいフォルダ（bower_components）を作成します。これでjqueryが 'bower_components'フォルダにインストールされました。
ステップ4： 'angular-cli.json'ファイルにjqueryの場所を追加する
（ 'jquery-demo'フォルダーにある） 'angular-cli.json'ファイルを開き、 "scripts"にjqueryの場所を追加します。これは次のようになります。
"scripts": ["../bower_components/jquery/dist/jquery.min.js"
]
ステップ5：テスト用の簡単なjqueryコードを書く
「app.component.html」ファイルを開き、簡単なコード行を追加します。ファイルは次のようになります。
<h1>
{{title}}
</h1>
<p>If you click on me, I will disappear.</p>
今すぐ 'app.component.ts'ファイルを開き、 'p'タグのjquery変数宣言とコードを追加します。ライフサイクルフックngAfterViewInit（）も使うべきです。変更を加えると、ファイルは次のようになります。
import { Component, AfterViewInit } from '@angular/core';
declare var $:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngAfterViewInit(){
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
}
}
今度は 'ng serve'コマンドを使用してAngular 2アプリケーションを実行し、テストします。それはうまくいくはずです。
ライフサイクルフック ngAfterViewInit（） を実装してDOM操作を追加することができます。
ngAfterViewInit() {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
}
角度2はビューをリサイクルする可能性があるため、routerを使用するときは注意してください。DOM要素の操作は、afterViewInitの最初の呼び出しでのみ行われるようにする必要があります。（静的ブール変数を使用できます）
class Component {
let static chosenInitialized : boolean = false;
ngAfterViewInit() {
if (!Component.chosenInitialized) {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
Component.chosenInitialized = true;
}
}
}
私は簡単な方法でそれをします - 最初にコンソールでnpmでjqueryをインストールしてください：npm install jquery -Sそしてそれからコンポーネントファイルで私はただ書いてください：let $ = require('.../jquery.min.js')そしてそれはうまくいきます！ここに私のコードからの完全な例：
import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');
@Component({
selector: 'departments-connections-graph',
templateUrl: './departmentsConnectionsGraph.template.html',
})
export class DepartmentsConnectionsGraph implements OnInit {
rootNode : any;
container: any;
constructor(rootNode: ElementRef) {
this.rootNode = rootNode;
}
ngOnInit() {
this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
console.log({ container : this.container});
...
}
}
Teplateで私は例えば持っています：
<div class="departments-connections-graph">something...</div>
_編集_
代わりに：
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');
つかいます
declare var $: any;
そしてindex.htmlに次のように書きます。
<script src="assets/js/jquery-2.1.1.js"></script>
これはグローバルに一度だけjqueryを初期化します - これは例えばブートストラップでモーダルウィンドウを使うために重要です...
ステップ1：以下のコマンドを使用します。npm install jquery --save
ステップ2：次のように角度をインポートすることができます。
'jquery'から$をインポートします。
それで全部です 。
例は次のとおりです。
import { Component } from '@angular/core';
import $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(){
console.log($('body'));
}
}
// jquerynpm install jquery --saveをインストールする
// jquerytypings install dt~jquery --global --saveの型定義をインストールする
//（ "angular-cli-build.js"ファイルで）指定されたようにjqueryライブラリをビルド設定ファイルに追加
vendorNpmFiles: [
.........
.........
'jquery/dist/jquery.min.js'
]
// jqueryライブラリをビルドに追加するためにビルドを実行するng build
//相対パス設定を追加する（system-config.js内）/** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };
/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};
// jqueryライブラリをコンポーネントファイルにインポートします
import 'jquery';
以下は私のサンプルコンポーネントのコードスニペットです。
import { Component } from '@angular/core';
import 'jquery';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
list:Array<number> = [90,98,56,90];
title = 'app works!';
isNumber:boolean = jQuery.isNumeric(89)
constructor(){}
}
Angular-Cliを使用すれば、次のことができます。
依存関係をインストールします ：
npm install jquery --save
npm install @ types/jquery --save-dev
ファイルをインポートします ：
「../node_modules/jquery/dist/jquery.min.js」を.angular-cli.jsonファイルの「script」セクションに追加
jqueryを宣言する ：
Tsconfig.app.jsonの「types」セクションに「$」を追加します。
あなたはより多くの詳細を見つけることができます 公式角度クリップドキュメント
Angular2でJqueryを使用する（4）
これらの設定に従う
jqueryとJuqry型定義をインストールする
Jqueryインストールの場合npm install jquery --save
Jquery型定義のインストールの場合npm install @types/jquery --save-dev
それから単純にjqueryをインポートする
import { Component } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
console.log($(window)); // jquery is accessible
}
私は愚か者なので、実用的なコードをいくつか用意しておくといいと思いました。
また、 Angular-protractorのAngular 2タイピングバージョンにはjQuery$に関する問題があるため、トップの回答ではきれいにコンパイルできません。
ここに私が働いているようになったステップがあります：
index.html
<head>
...
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
...
</head>
My.component.tsの中
import {
Component,
EventEmitter,
Input,
OnInit,
Output,
NgZone,
AfterContentChecked,
ElementRef,
ViewChild
} from "@angular/core";
import {Router} from "@angular/router";
declare var jQuery:any;
@Component({
moduleId: module.id,
selector: 'mycomponent',
templateUrl: 'my.component.html',
styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
scrollLeft() {
jQuery('#myElement').animate({scrollLeft: 100}, 500);
}
}
書くだけ
declare var $:any;
すべてのインポートセクションの後に、jQueryを使用してjQueryライブラリをindex.htmlページに含めることができます。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
それは私のために働いた
この点は私の前に作成されたすべての投稿で言及されていたので、私はjqueryのインストールをスキップしています。それで、あなたはすでにjqueryをインストールしました。このようにあなたのコンポーネントにtをインポートする
import * as $ from 'jquery';
しかし、サービスを作成することによってこれを行うための別の「角度のある」方法があります。
ステップ番号1： jquery.service.tsファイルを作成します 。
// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');
ステップいいえ。 2： app.module.tsにサービスを登録します
import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;
providers: [
{ provide: JQUERY_TOKEN, useValue: jQuery },
]
ステップ番号3：あなたのコンポーネントにサービスを注入する my-super-duper.component.ts
import { Component, Inject } from '@angular/core';
export class MySuperDuperComponent {
constructor(@Inject(JQUERY_TOKEN) private $: any) {}
someEventHandler() {
this.$('#my-element').css('display', 'none');
}
}
誰かが両方の方法の長所と短所を説明することができれば私は非常に感謝します。
1）コンポーネント内のDOMにアクセスする。
import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
this.el = el.nativeElement;
this.dom = new BrowserDomAdapter();
}
ngOnInit() {
this.dom.setValue(this.el,"Adding some content from ngOnInit");
}
次の方法でjQueryを含めることができます。 2）angular2をロードする前にindex.htmlにjqueryファイルを含めます
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- jquery file -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
次のようにJqueryを使うことができます。
import { Directive, ElementRef} from '@angular/core';
declare var $:any;
@Directive({
selector: '[uiDatePicker]',
})
export class UiDatePickerDirective {
private el: HTMLElement;
constructor(el: ElementRef) {
this.el = el.nativeElement;
}
ngOnInit() {
$(this.el).datepicker({
onSelect: function(dateText:string) {
//do something on select
}
});
}
}
これは私のために働きます。
"InjectionToken"を使ってインポートすることもできます。ここに記述されているように： Angular/TypeScriptで型定義なしでjQueryを使う
単純にjQueryグローバルインスタンスを注入して使用することができます。このためには、型定義や型付けは必要ありません。
import { InjectionToken } from '@angular/core';
export const JQ_TOKEN = new InjectionToken('jQuery');
export function jQueryFactory() {
return window['jQuery'];
}
export const JQUERY_PROVIDER = [
{ provide: JQ_TOKEN, useFactory: jQueryFactory },
];
App.module.tsで正しく設定されている場合：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { JQ_TOKEN } from './jQuery.service';
declare let jQuery: Object;
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
providers: [
{ provide: JQ_TOKEN, useValue: jQuery }
],
bootstrap: [AppComponent]
})
export class AppModule { }
あなたのコンポーネントでそれを使い始めることができます：
import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';
@Component({
selector: "selector",
templateUrl: 'somefile.html'
})
export class SomeComponent {
constructor( @Inject(JQ_TOKEN) private $: any) { }
somefunction() {
this.$('...').doSomething();
}
}
これは私のために働いたものです - Angular 2 with webpack
$をany型として宣言しようとしましたが、取得していたJQueryモジュールを使用しようとするたびに（たとえば）$(..).datepicker()は関数ではありません
私のvendor.tsファイルにJqueryが含まれているので、それを使ってコンポーネントにインポートしました。
import * as $ from 'jquery';
私は今Jqueryプラグイン（bootstrap-datetimepickerのような）を使うことができます
私が見つけた最も効果的な方法は、ページ/コンポーネントコンストラクタ内で、0の時間を指定してsetTimeoutを使用することです。これで、Angularがすべての子コンポーネントのロードを終了した後、jQueryは次の実行サイクルで実行されます。他にもいくつかのコンポーネントメソッドを使用できますが、setTimeout内で実行したときに試したすべての方法が最も効果的です。
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}
グローバルライブラリのインストール as 公式文書はこちら
npmからインストールします。
npm install jquery --save必要なスクリプトファイルをスクリプトに追加します。
"scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],
サーバーを実行している場合はサーバーを再起動してください。これでアプリケーション上で動作するはずです。
単一のコンポーネント内で使用したい場合は、コンポーネント内でimport $ from 'jquery';を使用してください。
Jqueryをインストールする
ターミナル$ npm install jquery
（ブートストラップ4の場合...）
ターミナル$ npm install popper.js
ターミナル$ npm install bootstrap
次に、importステートメントをapp.module.tsに追加します。
import 'jquery'
（ブートストラップ4の場合...）
import 'popper.js'
import 'bootstrap'
これで、JavaScriptを参照するための<SCRIPT>タグは不要になりました。
（あなたが使いたいCSSはまだstyles.cssで参照される必要があります）
@import "~bootstrap/dist/css/bootstrap.min.css";
他の人はすでに投稿しました。しかし、私はここで簡単な例を挙げて、それが何人かの新しい人を助けることができるようにします。
Step-1：あなたのindex.htmlファイルの中でjquery cdn
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
Step-2：ボタンをクリックしたときにdivを表示したい、またはdivを隠したいと仮定します。
<input type="button" value="Add New" (click)="ShowForm();">
<div class="container">
//-----.HideMe{display:none;} is a css class----//
<div id="PriceForm" class="HideMe">
<app-pricedetails></app-pricedetails>
</div>
<app-pricemng></app-pricemng>
</div>
Step-3：以下のコンポーネントファイルで、importは$をbellowとして宣言します。
declare var $: any;
以下のような関数を作成するよりも：
ShowForm(){
$('#PriceForm').removeClass('HideMe');
}
最新のAngularとJQueryで動作します。
Angularを使用するときは、jqueryライブラリを使用しないでください。角度付きフレームワーク用に作成された機能とライブラリを使用してみてください。 find（） 、 html（） 、 nearest（） などのjquery関数を使いたい場合は、純粋なjsを使うことをお勧めします。例： querySelector（） 、 innerHTML 、 parentElement など.
AngularCliを使用する
npm install jquery --save
Scripts配列下のangular.jsonに
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] //for latest version copy full path of node_modules>jquery>dist>jquery.min.js to avoid path error
JQueryを使用するには、jQueryを使用するコンポーネントに次のようにインポートするだけです。
import * as $ from 'jquery';
たとえば、ルートコンポーネントでjQueryを使う
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public ngOnInit()
{
//jQuery code
});
});
}
}