web-dev-qa-db-ja.com

jQueryをAngular2 TypeScriptプロジェクトにインポートする方法は？

Angular2ディレクティブでjQueryコードをラップしたい。

次のコマンドを使用して、Typings用のjQueryライブラリをプロジェクトにインストールしました。

typings install dt~jquery --save --global

そのため、プロジェクトディレクトリのtypings/globalフォルダーの下にjqueryフォルダーがあります。さらに、次の新しい行がtypings.jsonファイルに追加されました。

{
    "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160602141332",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160807145350",
        "jquery": "registry:dt/jquery#1.10.0+20160908203239"
    }
}

新しいAngular2ディレクティブ（app-moduleファイルにインポートしたもの）を書き始めましたが、jQueryライブラリを正しくインポートする方法がわかりません。ここに私のソースファイルがあります：

import {Directive} from '@angular/core';

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}

しかし、$もjQueryも使用できません。次のステップは何ですか？

jqueryangulartypescriptangular2-directivestypescript-typings
16
smartmouse

ステップ1：プロジェクトでjqueryを取得

npm install jquery

ステップ2：jqueryのタイプを追加

npm install -D @types/jquery

ステップ3：コンポーネントで使用してください！

import * as $ from 'jquery';

$を使用する準備ができました！

24
Chinmay

「@ angular/cli」を使用している場合は、インストールします。

npm install jquery --save

2番目のステップのインストール：

install: npm install @types/jquery --save-dev

そして、ルート上の「angular-cli.json」でファイル名を見つけて、次のように内部を追加します。

script:["../node_modules/jquery/dist/jquery.min.js"]

これで動作します。

4
Sheo

jQuery.service.ts

 import { OpaqueToken } from '@angular/core'
export let JQ_TOKEN = new OpaqueToken('jQuery');

index.ts`

export * from './jQuery.service';

app.module.ts

declare let jQuery : Object;

@NgModule({
  providers: [
    { provide: TOASTR_TOKEN, useValue: toastr },
    { provide: JQ_TOKEN, useValue: jQuery },
})
export class AppModule { }

コンポーネントでのJqueryの使用方法

   import { Component, Input, ViewChild, ElementRef, Inject } from '@angular/core'
import { JQ_TOKEN } from './jQuery.service'

@Component({
  selector: 'simple-modal',
  template: `
  <div id="{{elementId}}" #modalcontainer class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body" (click)="closeModal()">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styles: [`
    .modal-body { height: 250px; overflow-y: scroll; }
  `]
})
export class SimpleModalComponent {
  @Input() title: string;
  @Input() elementId: string;
  @Input() closeOnBodyClick: string;
  @ViewChild('modalcontainer') containerEl: ElementRef;

  constructor(@Inject(JQ_TOKEN) private $: any) {}

  closeModal() {
    if(this.closeOnBodyClick.toLocaleLowerCase() === "true") {
      this.$(this.containerEl.nativeElement).modal('hide');
    }
  }
}
3
user1089766

また、index.htmlのscriptセクションにある通常のheadタグにjQuery Javascriptファイルをロードすることもできます。

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js" />

        ...
    </head>
    ...

次に、必要なコンポーネントまたはディレクティブで、$変数はjQueryに必要です。必要なすべてのプラグインを入力する必要がないためです。

import {Directive} from '@angular/core';

declare var $: any;

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}
1
rinukkusu

Jqueryタイピングファイルを指すtypings.jsonが必要です。次に：

systemjs.config（jqueryの通知マップ設定）

System.config({
    defaultJSExtensions: true,
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        'app':  'app',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
        material: 'npm:material-design-lite/dist/material.min.js',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        ....
    },
    packages: {
        app: { main: 'main', format: 'register', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
});

コンポーネント内：

import $ from 'jquery';

その後、通常どおり$を使用します。

1
vidalsasoon

これは古い質問であり、すでにいくつかの答えがあります。ただし、既存の回答は非常に複雑です（user1089766からの回答には多くの不要なものが含まれています）。これが新しい人の助けになることを願っています。

_<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>_ファイルに_index.html_を追加します。

JQuery.Service.tsを作成します。

_import {InjectionToken} from "@angular/core";
export let jQueryToken = new InjectionToken('jQuery'); 
_

モジュールファイルで、このjQueryTokenをプロバイダーに追加します。

_providers:[
{
    provide: jQueryToken,
    useValue: jQuery

}] 
_

これで@Inject(jQueryToken)になり、使用する準備が整いました。次に、コンポーネント名ExperimentComponent内で使用したいとします。

_import {Component, Inject, OnInit} from '@angular/core';
import {jQueryToken} from "./common/jquery.service";

@Component({
    selector: 'app-experiment',
    templateUrl: './experiment.component.html',
    styleUrls: ['./experiment.component.css']
})
export class ExperimentComponent implements OnInit {

    constructor(@Inject(jQueryToken) private $: any) {
        $(document).ready(function () {
            alert(' jQuery is working');
        });
    }

    ngOnInit() {
    }

}
_

ExperimentComponentを開くたびに、アラート関数がメッセージを呼び出してポップアップします。

0
V.Tran

angular 2.でjqueryを使用することは問題ではないと思います。jqueryの入力と依存関係が適切にインストールされている場合、jqueryを=で使用することは問題になりません。 angular 2。

適切なインストールでangular 2プロジェクトでjqueryを使用できました。適切なインストールとは、jQueryタイピングをインストールしてTypeScriptで認識することを意味します。

その後、次の方法でjqueryを使用できました。

jQuery(document).ready({
    ()=>{
        alert("Hello!");
    };
});
0
Abhinandan