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

Question

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

Может кто-нибудь сказать мне, как использовать JQuery с Angular?

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

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

412

jquery angular

Источник

user2398523 03 июн '15 в 15:01

27 ответов

Решение

Это то, что сработало для меня.

ШАГ 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();

#ОБНОВИТЬ - `Feb - 2017`

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

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

Удачи.

160

Источник

user4742733 01 ноя '16 в 07:22

Почему все делают это ракетостроением? Для тех, кто хочет сделать что-то простое на статических элементах, например: body тег, просто сделайте это:

В index.html добавить script тег с путем к вашей библиотеке jquery, не имеет значения, где (таким образом, вы также можете использовать условные теги IE, чтобы загрузить более низкую версию jquery для IE9 и менее).
В вашем export component Блок имеет функцию, которая вызывает ваш код: $("body").addClass("done"); Обычно это приводит к ошибке объявления, поэтому после импорта в этот файл.ts добавьте declare var $:any; и тебе хорошо идти!

128

Источник

user2348614 07 июл '16 в 12:58

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

declare var jQuery:any;

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

Чтобы получить доступ к любому элементу с идентификатором X или Class X, вам просто нужно сделать

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

59

Источник

user2382154 08 июл '16 в 16:41

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

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. использовать

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

34

Источник

user5541499 22 июн '17 в 07:01

Пожалуйста, следуйте этим простым шагам. Это сработало для меня. Давайте начнем с нового приложения Angular 2, чтобы избежать путаницы. Я использую Angular 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

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

"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 и добавьте объявление переменной jquery и код для тега p. Вы должны также использовать хук жизненного цикла 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' и протестируйте его. Он должен работать.

28

Источник

user7532440 17 фев '17 в 10:28

Использование Angular Cli

 npm install jquery --save

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

25

Источник

user11048793 28 апр '19 в 06:19

Если вы используете angular-cli, вы можете сделать:

Установите зависимость:
npm установить jquery --save
npm install @ types / jquery --save-dev
Импортируйте файл:
Добавьте "../node_modules/jquery/dist/jquery.min.js" в раздел "script" в файле.angular-cli.json
Объявить jquery:
Добавьте "$" в раздел "types" tsconfig.app.json

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

13

Источник

user7996929 09 авг '17 в 09:28

Шаг 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'));
  }


}

13

Источник

user4080959 09 окт '17 в 11:55

Вы можете реализовать хук жизненного цикла 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;
        }
    }
}

13

Источник

user1688772 04 окт '15 в 18:45

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

и в ваш index.html положить:

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

Это инициализирует jquery только один раз в глобальном масштабе - это важно, например, для использования модальных окон в начальной загрузке...

12

Источник

user860099 29 июн '16 в 12:37

// установка 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.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(){}
}

10

Источник

user5780329 12 авг '16 в 14:31

Использовать Jquery в Angular2(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 
}

9

Источник

user6391256 09 июн '17 в 14:52

Сначала установите jQuery с помощью npm следующим образом:

npm install jquery — save

Во-вторых, перейдите в файл./angular-cli.json в корне папки проекта Angular CLI, найдите свойство scripts: [] и укажите путь к jQuery следующим образом:

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

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

import * as $ from 'jquery';
(or)
declare var $: any;

Взгляните на приведенный ниже код, который использует jQuery для анимации div при нажатии, особенно во второй строке. Мы импортируем все как $ из 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 {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

7

Источник

user12565549 31 дек '19 в 10:05

Угловой 12

npm i jquery

это важно : npm i @types/jquery

angular.json

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

.ts файл

      import * as $ from "jquery";

5

Источник

user13545243 04 окт '21 в 22:06

Просто пиши

declare var $:any;

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

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

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

5

Источник

user5400478 15 окт '16 в 11:20

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

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 как сервис против импорта * как $ из 'jquery';

4

Источник

user4717573 21 апр '18 в 21:14

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

Кроме того, версия angular-транспортир 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);

    }
}

4

Источник

user463059 03 окт '16 в 22:39

Другие уже размещены. но я привожу простой пример, чтобы помочь некоторым новичкам.

Шаг 1: В вашем файле index.html ссылка на jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Шаг 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>

Шаг 3: В приведенном ниже файле компонента импорт объявляет $ как ниже:

declare var $: any;

чем создать функцию, как показано ниже:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Он будет работать с последними версиями Angular и JQuery.

3

Источник

user1542982 06 май '19 в 21:30

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 в index.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 выбора даты.

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

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

2

Источник

user3918700 07 июн '16 в 13:16

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

Установить с npm:
npm install jquery --save
Добавьте необходимые файлы сценариев в сценарии:
"scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

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

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

2

Источник

user6786941 30 сен '18 в 12:22

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

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

1

Источник

user2637829 06 апр '16 в 13:56

Вы также можете попробовать импортировать его с помощью "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 },
];

Когда правильно установлено в вашем 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();
    }
}

1

Источник

user1987351 16 май '17 в 14:54

добавьте этот код Ниже в src/Main.ts будут важные jquery и все функции во всем проекте

      import * as jquery from 'jquery';
import * as bootstrap from 'bootstrap';

не забудьте npm i @types/jquery и npm i @types/bootstrap

1

Источник

user4499440 02 янв '23 в 12:03

Вот что у меня сработало - Angular 2 с веб-пакетом

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

Поскольку Jquery включен в мой файл vendor.ts, я просто импортировал его в свой компонент, используя

import * as $ from 'jquery';

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

1

Источник

user2102114 03 май '17 в 07:05

Когда вы используете Angular, старайтесь не использовать библиотеку jquery. Попробуйте использовать функции и библиотеки, которые создаются для угловой структуры. Если вы хотите использовать функции jquery, такие как find (), html (), closest () и т. Д., Я предлагаю использовать чистый js. пример: querySelector (), innerHTML, parentElement и т. д...

0

Источник

user8217454 19 апр '19 в 05:24

Установите jquery

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

(Для начальной загрузки 4...)

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

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

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

import 'jquery'

(Для начальной загрузки 4...)

import 'popper.js'
import 'bootstrap'

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

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

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

-1

Источник

user324479 19 сен '18 в 00:37

Другие вопросы по тегам jquery angular

user2881743 05 июн '15 в 09:16 2015-06-05 09:16 · Accepted Answer · 2015-06-05 09:16

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

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

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

В вашем угловом компоненте вы должны ссылаться на элемент DOM из шаблона, используя @ViewChild() После инициализации представления вы можете использовать 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);

Этот пример доступен на плункере: http://plnkr.co/edit/Nq9LnK?p=preview

Цлинт будет жаловаться chosen не являясь свойством в $, чтобы исправить это, вы можете добавить определение к интерфейсу JQuery в свой файл *.d.ts

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

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

27 ответов

ШАГ 1 - Перво-наперво

ШАГ 2 - ИМПОРТ

#ОБНОВИТЬ - Feb - 2017

#ОБНОВИТЬ - `Feb - 2017`