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

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

1. в индекс.html добавить script тег с путем к вашей jQuery lib, не имеет значения, где (таким образом, вы также можете использовать условные теги IE для загрузки более низкой версии jquery для IE9 и меньше).
2. в своем 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

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

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

Удачи.

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

declare var jQuery:any;

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

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

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

пожалуйста, выполните следующие простые шаги. Это сработало для меня. Давайте начнем с нового углового 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'

Open ' angular-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>

---

EDIT

альтернативно вместо использования:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

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

declare var $: any;

и в индексе.html put:

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

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

   npm install jquery --save

   npm install @types / jquery --save-dev

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

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

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

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

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

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


}

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

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

Установите тип defination 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 
}

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

кроме того, 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 файл я просто импортировал его в свой компонент с помощью

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

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

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

   npm install jquery --save

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

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

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

---

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