Как использовать jQuery с Angular?

может кто-нибудь сказать мне, как использовать jQuery С Угловое?

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

Я знаю, что есть обходные пути, такие как манипулирование класс или id элемента DOM заранее, но я надеюсь на более чистый способ сделать это.

21 ответов


использование jQuery из Angular2-легкий ветерок по сравнению с ng1. Если вы используете TypeScript, вы можете сначала сослаться на определение jQuery typescript.

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions не требуются, так как вы можете просто использовать any в качестве типа $ или jQuery

в вашем угловом компоненте вы должны ссылаться на элемент DOM из шаблона, используя @ViewChild() после инициализации представления вы можете использовать nativeElement свойство этого объекта и pass на 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 не будучи свойством$, чтобы исправить это, вы можете добавить определение в интерфейс JQuery в своем пользовательском *.d.TS file

interface JQuery {
    chosen(options?:any):JQuery;
}    

почему все делают это ракетостроение? Для всех, кому нужно сделать некоторые основные вещи на статических элементах, например,body tag, просто сделайте это:

  1. в индекс.HTML-код добавить script тег с путем к вашему jQuery lib, не имеет значения, где (таким образом, вы также можете использовать условные теги IE для загрузки более низкой версии jquery для IE9 и меньше).
  2. в своем export component блок имеет функцию, которая вызывает ваш код:$("body").addClass("done"); Normaly это вызывает ошибку объявления, так что сразу после всего импорта в этом .файл 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

в последнее время, я пишу код ES6 вместо typescript и в import без * as $ на import statement. Вот как это выглядит сейчас:

import $ from 'jquery';
//
$('#elemId').width();

Удачи.


теперь это стало очень легко, вы можете сделать это, просто объявив переменную jQuery с любым типом внутри контроллера Angular2.

declare var jQuery:any;

добавьте это сразу после операторов импорта и перед декоратором компонентов.

для доступа к любому элементу с идентификатором X или классом X вам просто нужно сделать

jQuery("#X or .X").someFunc();

пожалуйста, следуйте этим простым шагам. У меня получилось. Давайте начнем с нового приложения angular 2, чтобы избежать путаницы. Я использую угловой cli. Итак, установите его, если у вас его еще нет. https://cli.angular.io/

Шаг 1: Создайте демо-приложение angular 2

ng new jquery-demo

вы можете использовать любое имя. Теперь проверьте, работает ли он, запустив ниже cmd.(Теперь убедитесь, что вы указываете на "jQuery-demo", если не используете команду cd )

ng serve

вы увидите "приложение работает!" в браузерах.

Шаг 2: Установите Bower (менеджер пакетов для интернета)

запустите эту команду на cli (убедитесь, что вы указываете на "jQuery-demo", если не используете команду cd):

npm i -g bower --save

теперь после успешной установки bower, создайте ' bower.файл json, используя следующую команду:

bower init

он будет запрашивать входы, просто нажмите enter для всех, если вы хотите по умолчанию значения и в конце типа "Да", когда он спросит: "хорошо выглядит?"

теперь вы можете увидеть новый файл (bower.json) в папке "jQuery-demo". Вы можете найти более подробную информацию о https://bower.io/

Шаг 3: Установите jquery

выполнить команду

bower install jquery --save

он создаст новую папку (bower_components), которая будет содержать папку установки jquery. Теперь у вас установлен jquery в 'bower_components' папка.

Шаг 4: Добавьте местоположение jquery в ' angular-cli.файл JSON'

открыть ' угловой-cli.файл json (присутствует в папке "jQuery-demo") и добавьте местоположение jquery в"Скрипты". Это будет выглядеть так:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Шаг 5: напишите простой код jquery для тестирования

"открыть".деталь.html ' файл и добавьте простую строку кода, файл будет выглядеть так:
<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

теперь откройте приложение.деталь.ts' файл и добавить объявление переменной jQuery и код для тега "p". Вы также должны использовать lifecycle hook 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();
             });
           });
     }
}

теперь запустите приложение angular 2 с помощью команды "ng serve" и протестируйте его. Это должно сработать.


простой способ:

1. включить скрипт

.HTML-код
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. объявить

мой.деталь.ТС

declare var $: any;

3. использовать

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

вы можете реализовать крюк жизненного цикла ngAfterViewInit () чтобы добавить некоторые манипуляции DOM

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

будьте осторожны при использовании маршрутизатора, потому что angular2 может рециркулировать представления .. поэтому вы должны быть уверены, что манипуляции элементами 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;
        }
    }
}

Я делаю это проще - сначала установите jquery npm в консоли: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;

и в индексе.ставить в HTML:

<script src="assets/js/jquery-2.1.1.js"></script>

это инициализирует только jquery once globaly-это важно, например, для использования модальных окон в bootstrap...


/ / установка jquerynpm install jquery --save

/ / установка определения типа для jquerytypings install dt~jquery --global --save

//добавление библиотеки jquery в файл конфигурации сборки, как указано(в "angular-cli-build.файл JS")

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

//запустите сборку, чтобы добавить библиотеку jquery в сборку ng build

//добавление конфигурации относительного пути(в system-config.Яш) /** 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';

ниже snipppet код моего образца компонента

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, вы можете сделать:

  1. установить зависимость :

    npm install jquery --save

    npm install @types / jquery --save-dev

  2. импорт файла :

    добавить "../папки node_modules/jQuery с/Р/и jQuery.минута.js "в раздел "сценарий".угловой-cli.файл json

  3. объявить jquery :

    добавить "$" в раздел "типы" tsconfig.приложение.в JSON

вы можете найти более подробную информацию о официальный угловой CLI doc


Шаг 1: используйте команду: npm install jquery --save

Шаг 2: Вы можете просто импортировать angular как:

импорт $ из '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'));
  }


}

использовать Jquery в Angular2 (4)

выполните следующие setps

Установите тип defination jQuery и Juqry

Для Установки Jquery npm install jquery --save

для установки defination типа 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 
}

поскольку я тупица, я подумал, что было бы неплохо иметь какой-то рабочий код.

кроме того, Angular2 typings версии угловой транспортир имеет проблемы с jQuery $, поэтому верхний принятый ответ не дает мне чистой компиляции.

вот шаги, которые я должен работать:

.HTML-код
<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

внутри меня.деталь.ТС

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);

    }
}


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) Включите файл jquery в индекс.html перед загрузкой angular2

      <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 следующим образом, здесь я использую jQuery Ui date picker.

    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
         }
        });
    }
}

эта работа для меня.


Я пропускаю установку jquery, так как этот момент был упомянут во всех сообщениях, созданных до моего. Итак, вы уже установили jquery. Импорта в компонент такой

import * as $ from 'jquery';

будет работать, но есть еще один" угловой " способ сделать это, создав сервис.

шаг нет. 1: создать С помощью jQuery.услуга.файл TS.

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

просто писать

declare var $:any;

после всех разделов импорта вы можете использовать jQuery и включить библиотеку jQuery в свой индекс.html страница

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

это сработало для меня


самый эффективный способ, который я нашел, - использовать setTimeout со временем 0 внутри конструктора страницы / компонента. Это позволит запустить jQuery в следующем цикле выполнения После того, как Angular закончит загрузку всех дочерних компонентов. Можно использовать несколько других методов компонентов, но все, что я пробовал, лучше всего работает при запуске внутри setTimeout.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

вот что сработало для меня-Angular 2 с webpack

Я пытался объявить $ тип any но всякий раз, когда я пытался использовать любой модуль JQuery, я получал (например) $(..).datepicker() не является функцией

поскольку у меня есть Jquery, включенный в моего поставщика.TS file я просто импортировал его в свой компонент, используя

import * as $ from 'jquery';

теперь я могу использовать плагины Jquery (например, bootstrap-datetimepicker)


вы также можете попробовать импортировать его с помощью "InjectionToken". Как описано здесь: используйте jQuery в Angular / Typescript без определения типа

вы можете просто ввести глобальный экземпляр 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 },
];

при правильной установке в вашем приложении.модуль.ТС:

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();
    }
}

установить jquery

терминал$ npm install jquery

(для bootstrap 4...)

терминал$ npm install popper.js

терминал$ npm install bootstrap

добавить import заявление app.module.ts.

import 'jquery'

(для bootstrap 4...)

import 'popper.js'
import 'bootstrap'

теперь вам больше не понадобится <SCRIPT> теги для ссылки на JavaScript.

(любой CSS, который вы хотите использовать, все еще должен быть указан в styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Установка Глобальной Библиотеки as официальная документация здесь

  1. установить из npm:

    npm install jquery --save

  2. добавить необходимые файлы скрипта в скрипт:

    "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

перезагрузите сервер, если вы его используете, и он должен работать на вашем приложении.


Если вы хотите использование внутри одного компонента use import $ from 'jquery'; внутри компонента