388

AngularでjQueryを使用する方法を教えてもらえますか?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

事前に DOM 要素のクラスまたはIDを操作するなどの回避策があることは承知していますが、よりクリーンな方法でそれを行うことを望んでいます。

4

25 に答える 25

128

なぜ誰もがそれをロケット科学にしているのですか？bodyタグなどの静的要素で基本的なことを行う必要がある他の人は、次のようにします。

  1. index.htmlscriptで、jquery ライブラリへのパスを含むタグを追加します。場所は関係ありません (この方法では、IE コンディショナル タグを使用して、IE9 以下の下位バージョンの jquery をロードすることもできます)。
  2. export componentブロックには、コードを呼び出す関数があります。通常$("body").addClass("done");、これにより宣言エラーが発生するため、この .ts ファイルのすべてのインポートの直後に追加するdeclare var $:any;と、準備完了です!
于 2016-07-07T12:58:29.107 に答える
59

これで非常に簡単になりました。Angular2 コントローラー内で任意の型の jQuery 変数を宣言するだけで実行できます。

declare var jQuery:any;

これを import ステートメントの直後、コンポーネント デコレータの前に追加します。

ID X またはクラス X を持つ要素にアクセスするには、次のことを行う必要があります。

jQuery("#X or .X").someFunc();
于 2016-07-08T16:41:15.513 に答える
13

angular-cli を使用する場合は、次のことができます。

  1. 依存関係をインストールします。

    npm install jquery --save

    npm install @types/jquery --save-dev

  2. ファイルをインポートします。

    .angular-cli.json ファイルの「script」セクションに「../node_modules/jquery/dist/jquery.min.js」を追加します。

  3. jquery を宣言します。

    tsconfig.app.json の「types」セクションに「$」を追加します

詳細については、公式の angular cli docを参照してください。

于 2017-08-09T09:28:49.880 に答える
10

//jquery のインストールnpm install jquery --save

//jquery の型定義をインストールするtypings install dt~jquery --global --save

// 指定されたビルド構成ファイルに jquery ライブラリを追加します (「angular-cli-build.js」ファイル内)。

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(){}
}
于 2016-08-12T14:31:23.840 に答える
4

私は劣等生なので、動作するコードがあればいいのにと思いました。

また、angular-protractor の Angular2 型付けバージョンには 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);

    }
}
于 2016-10-03T22:39:45.073 に答える
4

書くだけ

declare var $:any;

すべてのインポート セクションの後、jQuery を使用して jQuery ライブラリを index.html ページに含めることができます。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

それは私のために働いた

于 2016-10-15T11:20:53.807 に答える
3

この点は、私の前に作成されたすべての投稿で言及されているため、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');
    }
}

誰かが両方の方法の長所と短所を説明できれば、非常に感謝しています。DI jquery as a service と import * as $ from 'jquery';

于 2018-04-21T21:14:54.537 に答える
1

私が見つけた最も効果的な方法は、ページ/コンポーネント コンストラクター内で時間を 0 にして setTimeout を使用することです。これにより、Angular がすべての子コンポーネントのロードを完了した後、次の実行サイクルで jQuery を実行できます。他のいくつかのコンポーネント メソッドを使用することもできますが、私が試したすべての方法は、setTimeout 内で実行したときに最適に機能します。

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}
于 2016-04-06T13:56:31.510 に答える