Может ли кто-нибудь сказать мне, как использовать jQuery с Angular?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
Я знаю, что есть обходные пути, такие как манипулирование классом или идентификатором элемента DOM, но я надеюсь на более чистый способ сделать это.
Использование jQuery из Angular2 - это бриз по сравнению с ng1. Если вы используете TypeScript, вы можете сначала указать определение jQuery TypeScript.
tsd install jquery --save
or
typings install dt~jquery --global --save
TypcriptDefinitions не требуется, поскольку вы можете просто использовать any как тип для $ или jQuery
В вашем компоненте angular вы должны ссылаться на элемент 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
tslint будет жаловаться на chosen, не являющийся свойством на $, чтобы исправить это, вы можете добавить определение в интерфейс JQuery в свой собственный файл *.d.ts
interface JQuery {
chosen(options?:any):JQuery;
}
Почему все делают это ракетной наукой?
Для всех, кто должен делать некоторые базовые вещи на статических элементах, например, тег body, просто выполните следующее:
script с помощью пути к вашей jquery lib, не имеет значения, где (таким образом вы можете также использовать условные теги IE для загрузки более низкой версии jquery для IE9 и меньше).export component есть функция, которая вызывает ваш код: $("body").addClass("done"); Normaly, это вызывает ошибку объявления, поэтому сразу после импорта в этом .ts файле добавьте declare var $:any;, и вам хорошо идти!Это то, что сработало для меня.
// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery
// 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();
Удачи.
Теперь стало очень легко, вы можете сделать это, просто объявив переменную jQuery с любым типом внутри контроллера Angular2.
declare var jQuery:any;
Добавьте это сразу после операторов импорта и перед декодером компонентов.
Чтобы получить доступ к любому элементу с идентификатором X или классом X, вам просто нужно сделать
jQuery("#X or .X").someFunc();
Простой способ:
1. включают script
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;";
}
Просьба выполнить следующие простые шаги. Это сработало для меня. Давайте начнем с нового приложения 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". Вы также должны использовать крючок для nqAfterViewInit(). После внесения изменений файл будет выглядеть так:
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});
...
}
}
В тесте, который я имею, например:
<div class="departments-connections-graph">something...</div>
ИЗМЕНИТЬ
Альтернативно вместо использования:
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');
использование
declare var $: any;
и в вашем index.html put:
<script src="assets/js/jquery-2.1.1.js"></script>
Это будет инициализировать jquery только один раз globaly - это важно, например, для использования модальных окон в бутстрапе...
шаг 1: используйте команду: npm install jquery --save
Шаг 2: вы можете просто импортировать angular как:
import $from '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 npm install jquery --save
//установка определения типа для jquery typings 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, вы можете сделать:
Установить зависимость:
npm установить jquery --save
npm install @types/jquery --save-dev
Импортировать файл:
Добавьте "../ node_modules/jquery/dist/jquery.min.js" в раздел "script" в файле .angular-cli.json
Объявить jquery:
Добавьте "$" в раздел "типы" tsconfig.app.json
Вы можете найти более подробную информацию о официальном angular cli doc
Использование 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
}
Так как я сумасшедший, я подумал, что было бы хорошо иметь какой-то рабочий код.
Кроме того, Angular2 типизированная версия angular -protractor имеет проблемы с jQuery $, поэтому верхний принятый ответ doesn Не дай мне чистый компилятор.
Вот шаги, которые я должен был выполнить:
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);
}
}
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 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
}
});
}
}
Эта работа для меня.
Просто пиши
declare var $:any;
после всех разделов импорта вы можете использовать jQuery и включить библиотеку jQuery на страницу index.html.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
это сработало для меня
Я пропускаю установку 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() не является функцией
Поскольку у меня есть Jquery, включенный в файл vendor.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 },
];
При правильной установке в вашем приложении .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();
}
}
Установите 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 в styles.css)
@import "~bootstrap/dist/css/bootstrap.min.css";
Установка Глобальной библиотеки как официальная документация здесь
Установить с npm:
npm install jquery --save
Добавьте необходимые файлы сценариев в сценарии:
"scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],
Перезапустите сервер, если вы его используете, и он должен работать в вашем приложении.
Если вы хотите использовать внутри одного компонента, используйте import $ from 'jquery'; внутри вашего компонента
Мои два цента на эту тему: ответ Васима Хаята (который, скорее всего, дурак) работает для меня на Angular 7 (и я верю в предыдущие версии Angular 2+). Это ИМХО самое простое.
Когда вы используете Angular, старайтесь не использовать библиотеку jquery. Попробуйте использовать функции и библиотеки, которые создаются для угловой структуры. Если вы хотите использовать функции jquery, такие как find(), html(), closest() и т.д., Я предлагаю использовать чистый js. пример: querySelector(), innerHTML, parentElement и т. д...
Использование 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
});
});
}
}
Другие уже размещены. но я привожу простой пример, чтобы помочь некоторым новичкам.
Шаг 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.