how - ¿Cómo usar jQuery con Angular?
jquery en angular 6 (24)
¿Por qué todos lo están convirtiendo en una ciencia espacial?
Para cualquier otra persona que necesite hacer algunas cosas básicas sobre elementos estáticos, por ejemplo, etiqueta
body
, simplemente haga esto:
-
En index.html, agregue la etiqueta de
scriptcon la ruta a su lib jquery, no importa dónde (de esta manera también puede usar etiquetas condicionales de IE para cargar una versión inferior de jquery para IE9 y menos). -
En su bloque de
export componenttenga una función que llame a su código:$("body").addClass("done");Normalmente, esto causa un error de declaración, así que justo después de todas las importaciones en este archivo .ts, agreguedeclare var $:any;y estás listo para ir!
¿Alguien puede decirme cómo usar jQuery con Angular ?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
Soy consciente de que existen soluciones alternativas como manipular la clase o la identificación del elemento DOM por adelantado, pero espero una forma más limpia de hacerlo.
// instalar jquery
npm install jquery --save
// instalación de la definición del tipo para los
typings install dt~jquery --global --save
jquery
typings install dt~jquery --global --save
// agregando la biblioteca jquery al archivo de configuración de compilación como se especifica (en el archivo "angular-cli-build.js")
vendorNpmFiles: [
.........
.........
''jquery/dist/jquery.min.js''
]
// ejecuta la compilación para agregar la biblioteca jquery en la compilación
ng build
// agregando la configuración de ruta relativa (en system-config.js)
/** Map relative paths to URLs. */ const map: any = { ....., ......., ''jquery'': ''vendor/jquery/dist'' };
Asigna
/** Map relative paths to URLs. */ const map: any = { ....., ......., ''jquery'': ''vendor/jquery/dist'' };
/** 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''}};
// importa la biblioteca jquery en tu archivo componente
import ''jquery'';
a continuación se muestra el fragmento de código de mi componente de muestra
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(){}
}
Ahora se ha vuelto muy fácil, puede hacerlo simplemente declarando la variable jQuery con cualquier tipo dentro del controlador Angular2.
declare var jQuery:any;
Agregue esto justo después de las declaraciones de importación y antes del decorador de componentes.
Para acceder a cualquier elemento con id X o Class X solo tienes que hacer
jQuery("#X or .X").someFunc();
Como soy un tonto, pensé que sería bueno tener un código funcional.
Además, la versión de tipificación Angular2 del
transportador angular tiene problemas con el jQuery
$
, por lo que la respuesta aceptada no me da una compilación limpia.
Estos son los pasos que llegué a estar trabajando:
index.html
<head>
...
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
...
</head>
Dentro de 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);
}
}
Cuando use Angular, intente no usar la biblioteca jquery. Intente usar las características y las bibliotecas que se producen para el marco angular. Si desea utilizar las funciones jquery como find () , html () , arest () y etc., sugiero usar js puro. ejemplo: querySelector () , innerHTML , parentElement y etc.
Esto es lo que funcionó para mí.
PASO 1 - Primero lo primero
// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery
PASO 2 - IMPORTACIÓN
// 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
Últimamente, estoy escribiendo código con
ES6
lugar de
typescript
y puedo
import
sin
* as $
en la
import statement
.
Así es como se ve ahora:
import $ from ''jquery'';
//
$(''#elemId'').width();
Buena suerte.
Estoy omitiendo la instalación de jquery ya que este punto se ha mencionado en todas las publicaciones creadas antes de la mía. Entonces, ya has instalado jquery. Importando t en su componente de esta manera
import * as $ from ''jquery'';
funcionará, pero hay otra forma "angular" de hacerlo creando un servicio.
Paso no. 1: crea el archivo 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'');
Paso. No. 2: registre el servicio en app.module.ts
import { JQUERY_TOKEN } from ''./services/jQuery.service'';
declare const jQuery: Object;
providers: [
{ provide: JQUERY_TOKEN, useValue: jQuery },
]
Paso no. 3: inyecta el servicio en tu componente 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'');
}
}
Estaré muy agradecido si alguien puede explicar los pros y los contras de ambos métodos: DI jquery como servicio versus import * as $ de ''jquery'';
Instalar jquery
Terminal $
npm install jquery
(Para bootstrap 4 ...)
Terminal $
npm install popper.js
Terminal $
npm install bootstrap
Luego agregue la declaración de
import
a
app.module.ts
.
import ''jquery''
(Para bootstrap 4 ...)
import ''popper.js''
import ''bootstrap''
Ahora ya no necesitará etiquetas
<SCRIPT>
para hacer referencia al JavaScript.
(Cualquier CSS que desee usar aún debe ser referenciado en
styles.css
)
@import "~bootstrap/dist/css/bootstrap.min.css";
La forma más efectiva que he encontrado es usar setTimeout con un tiempo de 0 dentro del constructor de página / componente. Esto permite que jQuery se ejecute en el siguiente ciclo de ejecución después de que Angular haya terminado de cargar todos los componentes secundarios. Se podrían usar algunos otros métodos de componentes, pero todos los que he intentado funcionan mejor cuando se ejecutan dentro de un setTimeout.
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}
Lo hago de una manera más simple: primero instalo jquery por npm en la consola:
npm install jquery -S
y luego en el archivo de componente solo escribo:
let $ = require(''.../jquery.min.js'')
y ¡funciona!
Aquí ejemplo completo de algunos mi código:
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});
...
}
}
En teplate tengo por ejemplo:
<div class="departments-connections-graph">something...</div>
EDITAR
Alternativamente, en lugar de usar:
let $ = require(''../../../../../node_modules/jquery/dist/jquery.min.js'');
utilizar
declare var $: any;
y en su index.html ponga:
<script src="assets/js/jquery-2.1.1.js"></script>
Esto inicializará jquery solo una vez globalmente; esto es importante, por ejemplo, para usar ventanas modales en bootstrap ...
Otros ya publicaron. pero doy un ejemplo simple aquí para que pueda ayudar a algunos recién llegados.
Paso 1: en su referencia index.html jquery cdn
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
Paso 2: suponga que queremos mostrar div u ocultar div al hacer clic en un botón:
<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>
Paso-3: en el archivo de componentes a continuación, la importación declara $ como se muestra a continuación:
declare var $: any;
que crear una función como abajo:
ShowForm(){
$(''#PriceForm'').removeClass(''HideMe'');
}
Funcionará con los últimos Angular y JQuery
Para usar Jquery en Angular2 (4)
Sigue estos ajustes
instale la definición de tipo Jquery y Juqry
Para la instalación de Jquery
npm install jquery --save
Para la definición del tipo de Jquery Instalación
npm install @types/jquery --save-dev
y luego simplemente importa el 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
}
Por favor, siga estos sencillos pasos. A mi me funciono. Comencemos con una nueva aplicación angular 2 para evitar confusiones. Estoy usando Angular cli. Por lo tanto, instálelo si aún no lo tiene. https://cli.angular.io/
Paso 1: crea una aplicación de demostración angular 2
ng new jquery-demo
Puedes usar cualquier nombre. Ahora verifique si está funcionando ejecutando debajo de cmd. (Ahora, asegúrese de estar apuntando a ''jquery-demo'' si no usa el comando cd)
ng serve
verá "¡la aplicación funciona!" en el navegador
Paso 2: Instalar Bower (un administrador de paquetes para la web)
Ejecute este comando en cli (asegúrese de apuntar a ''jquery-demo'' si no usa el comando cd):
npm i -g bower --save
Ahora, después de la instalación exitosa de bower, cree un archivo ''bower.json'' utilizando el siguiente comando:
bower init
Solicitará entradas, solo presione enter para todos si desea valores predeterminados y al final escriba "Sí" cuando pregunte "¿Se ve bien?"
Ahora puede ver un nuevo archivo (bower.json) en la carpeta "jquery-demo". Puede encontrar más información en https://bower.io/
Paso 3: Instalar jquery
Ejecute este comando
bower install jquery --save
Creará una nueva carpeta (bower_components) que contendrá la carpeta de instalación de jquery. Ahora tiene jquery instalado en la carpeta ''bower_components''.
Paso 4: Agregue la ubicación de jquery en el archivo ''angular-cli.json''
Abra el archivo ''angular-cli.json'' (presente en la carpeta ''jquery-demo'') y agregue la ubicación de jquery en "scripts". Se verá así:
"scripts": ["../bower_components/jquery/dist/jquery.min.js"
]
Paso 5: escriba un código jquery simple para probar
Abra el archivo ''app.component.html'' y agregue una línea de código simple. El archivo se verá así:
<h1>
{{title}}
</h1>
<p>If you click on me, I will disappear.</p>
Ahora abra el archivo ''app.component.ts'' y agregue la declaración de variable jquery y el código para la etiqueta ''p''. También debe usar el ciclo de vida hook ngAfterViewInit (). Después de hacer cambios, el archivo se verá así:
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();
});
});
}
}
Ahora ejecute su aplicación angular 2 usando el comando ''ng serve'' y pruébelo. Deberia de funcionar.
Puede implementar el enlace de ciclo de vida ngAfterViewInit () para agregar algunas manipulaciones DOM
ngAfterViewInit() {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on(''change'', (e, args) => {
_this.selectedValue = args.selected;
});
}
Tenga cuidado al usar el enrutador porque angular2 puede reciclar vistas ... por lo que debe asegurarse de que las manipulaciones de los elementos DOM se realicen solo en la primera llamada de afterViewInit ... (Puede usar variables booleanas estáticas para hacerlo)
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;
}
}
}
Si usa angular-cli puede hacer:
-
Instalar la dependencia :
npm install jquery --save
npm install @ types / jquery --save-dev
-
Importa el archivo :
Agregue "../node_modules/jquery/dist/jquery.min.js" a la sección "script" en el archivo .angular-cli.json
-
Declarar jquery :
Agregue "$" a la sección "tipos" de tsconfig.app.json
Puedes encontrar más detalles sobre el documento oficial de angular cli
Solo escribe
declare var $:any;
después de todas las secciones de importación, puede usar jQuery e incluir la biblioteca jQuery en su página index.html
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
funciono para mi
También puede intentar importarlo con el "InjectionToken". Como se describe aquí: use jQuery en angular / mecanografiado sin una definición de tipo
Simplemente puede inyectar la instancia global de jQuery y usarla. Para esto no necesitará ninguna definición de tipo o tipificación.
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 },
];
Cuando se configura correctamente en su 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 { }
Puede comenzar a usarlo en sus componentes:
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();
}
}
Una manera simple:
1. incluir guión
index.html
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
2. declarar
my.component.ts
declare var $: any;
3. uso
@Component({
selector: ''home'',
templateUrl: ''./my.component.html'',
})
export class MyComponent implements OnInit {
...
$("#myselector").style="display: none;";
}
Usando Cli Angular
npm install jquery --save
En angular.json debajo de la matriz de scripts
"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
Ahora para usar jQuery, todo lo que tiene que hacer es importarlo de la siguiente manera en cualquier componente que quiera usar jQuery.
import * as $ from ''jquery'';
Por ejemplo, usando jQuery en el componente raíz
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
});
});
}
}
Usar jQuery de Angular2 es muy sencillo en comparación con ng1. Si está utilizando TypeScript, primero puede hacer referencia a la definición de mecanografiado jQuery.
tsd install jquery --save
or
typings install dt~jquery --global --save
Las definiciones mecanografiadas no son necesarias, ya que puede usar
any
como tipo para
$
o
jQuery
En su componente angular, debe hacer referencia a un elemento DOM de la plantilla usando
@ViewChild()
Después de que la vista se haya inicializado, puede usar la propiedad
nativeElement
de este objeto y pasarla a jQuery.
Declarar
$
(o
jQuery
) como JQueryStatic le dará una referencia escrita a 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);
Este ejemplo está disponible en plunker: http://plnkr.co/edit/Nq9LnK?p=preview
tslint se quejará de que
chosen
no sea una propiedad en $, para solucionar esto, puede agregar una definición a la interfaz JQuery en su archivo personalizado * .d.ts
interface JQuery {
chosen(options?:any):JQuery;
}
paso 1: usa el comando: npm install jquery --save
Paso 2: simplemente puedes importar angular como:
importar $ desde ''jquery'';
eso es todo .
Un ejemplo sería:
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''));
}
}
1) Para acceder a DOM en el componente.
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");
}
Puede incluir jQuery de la siguiente manera. 2) Incluya su archivo jquery en index.html antes de las cargas angulares2
<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>
Puede usar Jquery de la siguiente manera, aquí estoy usando el selector de fecha 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
}
});
}
}
Este trabajo para mi.
Esto es lo que funcionó para mí: Angular 2 con webpack
Intenté declarar
$
como tipo
any
pero cada vez que intenté usar cualquier módulo JQuery que estaba obteniendo (por ejemplo)
$(..).datepicker()
no es una función
Como tengo Jquery incluido en mi archivo vendor.ts, simplemente lo importé a mi componente usando
import * as $ from ''jquery'';
Ahora puedo usar los complementos de Jquery (como bootstrap-datetimepicker)
Instalación de la Biblioteca Global como documentación oficial aquí
-
Instalar desde npm:
npm install jquery --save -
Agregue los archivos de script necesarios a los scripts:
"scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],
Reinicie el servidor si lo está ejecutando, y debería estar funcionando en su aplicación.
Si desea usar dentro de un solo componente, use
import $ from ''jquery'';
dentro de su componente