Як користуватися jQuery з Angular?

Хто-небудь може сказати мені, як використовувати jQuery з Angular ?

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

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

Використання jQuery від Angular2 - вітер порівняно з ng1. Якщо ви використовуєте TypeScript, ви можете спочатку вказати на визначення типу qQery.

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

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

tslint поскаржиться на те, що chosenне є власністю на $, щоб виправити це, ви можете додати визначення до інтерфейсу JQuery у вашому користувальницькому файлі * .d.ts

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

Чому всі роблять це наукою про ракету? Для всіх, кому потрібно виконати основні речі на статичних елементах, наприклад, bodyтег, просто зробіть це:

1. У index.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;

Додайте це відразу після операцій імпорту та перед декоратором компонентів.

Для доступу до будь-якого елемента з id X або Class X ви просто повинні зробити

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

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

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

Дотримуйтесь цих простих кроків. Це працювало для мене. Почнемо з нового кутового додатка 2, щоб уникнути плутанини. Я використовую Angular cli. Отже, встановіть його, якщо у вас його ще немає. https://cli.angular.io/

Крок 1: Створіть демонстраційну програму 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": ["../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' і протестуйте її. Це має працювати.

Ви можете реалізувати гак життєвого циклу 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;

і у свій index.html покладіть:

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

Це ініціалізує jquery лише один раз глобально - це важливо, наприклад, для використання модальних вікон у завантажувальному ...

крок 1: скористайтеся командою: npm встановити 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'));
  }


}

// встановлення 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(){}
}

Якщо ви використовуєте кутовий кліп, ви можете зробити:

1. Встановіть залежність :

   npm встановити jquery --save

   npm встановити @ types / jquery --save-dev

2. Імпортуйте файл :

   Додайте "../node_modules/jquery/dist/jquery.min.js" до розділу "скрипт" у файлі .angular-cli.json

3. Оголосити jquery :

   Додайте "$" до розділу "типів" tsconfig.app.json

Більш детальну інформацію ви можете знайти на офіційному кутовому док

Використовувати 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 
}

Використання кутового клієнта

 npm install jquery --save

У angular.json під масивом скриптів

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Тепер, щоб використовувати jQuery, все, що вам потрібно зробити, це імпортувати його наступним чином у будь-який компонент, який ви хочете використовувати jQuery.

Наприклад, імпорт та використання jQuery в кореневому компоненті

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

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


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Оскільки я є дунцем, я подумав, що було б добре мати якийсь робочий код.

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

    }
}

Просто напишіть

declare var $:any;

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

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

це працювало на мене

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) До завантаження angular2 додайте файл jquery до index.html

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

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

Я пропускаю встановлення 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';

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

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

Ось що для мене працювало - Angular 2 з webpack

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

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

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 },
];

Якщо правильно встановлено у вашому 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. Встановити з npm:

   npm install jquery --save

2. Додайте потрібні файли сценаріїв до сценаріїв:

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

Перезавантажте сервер, якщо ви його запускаєте, і він повинен працювати над вашим додатком.

Якщо ви хочете використовувати всередині одного компонента, використовуйте import $ from 'jquery';всередині свого компонента

Інші вже розміщені. але я наводжу простий приклад, щоб допомогти новим бажаючим.

Крок 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

Спочатку встановіть jQuery за допомогою npm наступним чином:

npm install jquery — save

По-друге, перейдіть до файла ./angular-cli.json у корені папки проекту Angular CLI та знайдіть властивість script: [] та включіть шлях до jQuery таким чином:

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

Тепер, щоб використовувати jQuery, все, що вам потрібно зробити, це імпортувати його в будь-який компонент, який ви хочете використовувати jQuery.

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

Погляньте на код нижче, який використовує 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 {
  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");
        });
    });
  }
}

Встановіть 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";

Коли ви використовуєте Angular, намагайтеся не використовувати бібліотеку jquery. Спробуйте скористатися функціями та бібліотеками, створеними для кутових рам. Якщо ви хочете використовувати функції jquery, такі як find () , html () , найближчий () та ін., Я пропоную використовувати чистий js. Приклад: querySelector () , innerHTML , parentElement і т.д ...