Как использовать 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, просто сделайте это:
- в индекс.HTML-код добавить
script
тег с путем к вашему jQuery lib, не имеет значения, где (таким образом, вы также можете использовать условные теги IE для загрузки более низкой версии jquery для IE9 и меньше). - в своем
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, вы можете сделать:
-
установить зависимость :
npm install jquery --save
npm install @types / jquery --save-dev
-
импорт файла :
добавить "../папки node_modules/jQuery с/Р/и jQuery.минута.js "в раздел "сценарий".угловой-cli.файл json
-
объявить 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 официальная документация здесь
-
установить из npm:
npm install jquery --save
-
добавить необходимые файлы скрипта в скрипт:
"scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],
перезагрузите сервер, если вы его используете, и он должен работать на вашем приложении.
Если вы хотите использование внутри одного компонента use import $ from 'jquery';
внутри компонента