¿Cómo usar jQuery con Angular?


343

¿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.


2
No sé qué versión estaba usando en el momento en que publicó, pero para mí agregar JQuery cdn en index.html es suficiente para llamar a $ en un componente
theFreedomBanana


10
Si bien algunas funciones de jQuery (especialmente complementos o jQueryUI) pueden ser muy útiles en una aplicación Angular2, no es una buena práctica consultar y manipular el DOM desde dentro de los componentes de Angular2, como lo describió en su pregunta. En las aplicaciones Angular2, los elementos DOM que desea manipular deben estar vinculados a su modelo de componente. El estado de los elementos DOM debe cambiar de acuerdo con los cambios del modelo. Mira esta respuesta: stackoverflow.com/questions/42411744/best-practice-of-angular-2
Benyamin Shoham

66
Creo que la respuesta correcta para esto es: usted no. Angular es más avanzado y más nuevo que jquery, no está desactualizado y tiene un código mucho más limpio
Mast3rd3mon

77
¿Por qué una persona debería usar JQuery con Angular?
Cristian Traìna

Respuestas:


331

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 de jQuery.

tsd install jquery --save
or
typings install dt~jquery --global --save

Las definiciones de mecanografiado no son necesarias, ya que podría usarlas anycomo tipo para $ojQuery

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 nativeElementpropiedad 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 chosenno ser 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;
}    

2
No estoy seguro de por qué setTimeoutse requiere la solución. He intentado con varios otros componentes de jQuery, y parece que todos ellos requieren esta solución para una inicialización correcta. Espero que esto cambie en el lanzamiento futuro de ng2
werenskjold

77
Se han agregado nuevas devoluciones de llamada en alpha37 github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md core: agregado afterContentInit, afterViewInit y afterViewChecked ganchos (d49bc43), cierra # 3897
Mourad Zouabi

18
esto no es tan difícil de configurar, pero ciertamente no es "una brisa" en comparación con el angular 1. en el angular 1 no tenía que hacer nada, y simplemente podía usar jquery en cualquier lugar. angular 1 está construido encima de jquery.
user428517

8
Después de instalar definiciones a través de tipings, JQueryStatic todavía no se reconoce.
Gonzalo

44
Creo que necesitamos actualizar esto un poco, ya que ahora usamos NPM para tipings
Jackie

122

¿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, bodyetiqueta, simplemente haga esto:

  1. En index.html, agregue la scriptetiqueta con 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).
  2. En su export componentbloque, tenga 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, agregue declare var $:any;y ¡listo!

20
No funciona para mi Así que voy a estudiar algo de ciencia espacial. :)
Prajeet Shrestha

11
El punto de angular 2 es eliminar la complejidad de tratar con el DOM. Angular 2 tiene un algoritmo diff que renderizará eficientemente sus componentes para usted, por eso es mejor engañar a jquery que manipulando el DOM apuntando al componente angular 2, en lugar de manipular directamente el DOM.
Ken

44
Intellisense, amigo mío, por eso
Ayyash

55
declare var $:any;¡por la victoria!
tylerlindell

2
Esto definitivamente funciona, pero si ya no estás viviendo en la edad de piedra, ve con la respuesta aceptada.
jlh

112

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 en ES6lugar de typescripty puedo importsin * as $en el import statement. Así es como se ve ahora:

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

Buena suerte.


50
Me tomó una hora descubrir cómo poner jQuery en Angular 2 (Correctamente) ... Estoy bastante seguro de que el desarrollo web está retrocediendo.
Starboy

1
Para importar $ del trabajo 'jquery' debe configurar --allowJs
titusfx

1
import * as $ from 'jquery';en app.module.ts para que esté disponible para todo el proyecto. Y por cierto: "¿Por qué --save en lugar de --save-dev?"
Martin Schneider

3
import $ from 'jquery';Esa es la declaración de importación de jquery más bonita de esta página. Exactamente cómo me gustaría que se vea.
cs_pupil

1
@Starboy eso se debe a que no debería necesitar ningún JQuery en una aplicación Angular y, si lo hace, probablemente esté haciendo algo mal.
phil294

55

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

Verificado, esto funciona para angular 2 con webpack (una plantilla SPA generada por yeoman Aspnetcore SPA). ¡A menudo, el enfoque más simple funciona mejor! Gracias.
binjiezhao

1
Lo estoy usando en mi proyecto, pero la falta de este método es que estamos perdiendo toda la capacidad de tipo fuerte de los tipos jQuery :)
trungk18

Trabajando en Angular 6 (6.0.3)
Alejandro Morán

Trabajando en: CLI angular: 7.1.4 Nodo: 10.15.0
Lance

28

Una manera simple:

1. incluir script

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

Trabajó para mi. Pero en lugar de implementar OnInit (que Angular no quería aceptar) lo usé dentro de MyComponent ngOnInit () {// mi jQuery aquí}
Ilya Kushlianski

25

Por favor, siga estos sencillos pasos. Funcionó para mi. 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 le 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.


3
EN MI HUMILDE OPINIÓN. Este es el mejor enfoque que todavía uso Bower para las dependencias del lado del cliente.
Fırat KÜÇÜK

" $("p").click(function(){ $(this).hide(); });" ¿El mejor ejemplo de cuándo no usar jQuery en Angular?
Martin Schneider

3
¿No es más fácil de configurar simplemente usando npm? npm install jquery --save, luego "scripts":["../node_modules/jquery/dist/jquery.js"], luego import $ from 'jquery';en archivos * .ts. ¿Cuál es la ventaja de usar bower?
cs_pupil

1
@cs_pupil También puede usar npm pero Bower está diseñado para administrar solo paquetes front-end. Eche un
vistazo

1
@AmanDeepSharma, gracias! Por extraño que parezca, parece que Bower ha quedado en desuso. npm install bowercedido: npm WARN deprecated bower@1.8.0:( stackoverflow.com/a/31219726/3806701 )
cs_pupil

13

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

3
Property 'domElement' does not exist on type ElementRef
villasv

12

Lo hago de una manera más simple: primero instalo jquery by npm en la consola: npm install jquery -Sy luego en el archivo de componente, simplemente 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 ...


no sé, nunca uso angular-cli pero uso angular2-webpack-starter y funciona allí.
Kamil Kiełczewski

¿De dónde viene ese método requerido?
omeralper


1
Tienes un error tipográfico => console.log({ conatiner : this.container});arreglarloconsole.log({ container: this.container});
eric.dummy

11

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


}

Module ..node_modules / @ types / jquery / index "'no tiene exportación predeterminada
Dmitry Grinko

10

// instalando jquerynpm install jquery --save

// instalación de la definición de tipo para jquerytypings 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' };

/** 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(){}
}

Impresionante, funciona perfecto para proyectos ng-cli ... ¡Gracias!
Chanakya Vadla

Super slick! Estoy usando Angular-cli para mi proyecto y ¡esto es oro! Rock on
Logan H

No tengo el archivo 'angular-cli-build.js': /
Gonzalo

10

Si usa angular-cli puede hacer:

  1. Instalar la dependencia :

    npm install jquery --save

    npm install @ types / jquery --save-dev

  2. Importa el archivo :

    Agregue "../node_modules/jquery/dist/jquery.min.js" a la sección "script" en el archivo .angular-cli.json

  3. Declarar jquery :

    Agregue "$" a la sección "tipos" de tsconfig.app.json

Puedes encontrar más detalles sobre el documento oficial de angular cli


1
Esto causa el siguiente error al generar: ERROR en el error TS2688: No se puede encontrar el archivo de definición de tipo para '$'.
representación

error TS1192: el módulo '' jquery '' no tiene exportación predeterminada
Dmitry Grinko

8

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 instalación de definición de tipo Jquery 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 
}


7

Usando Cli Angular

 npm install jquery --save

En angular.json debajo de la matriz de scripts

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative 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 desee usar jQuery.

Por ejemplo, importar y usar jQuery en el componente raíz

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

la ruta es un uso incorrecto./node_modules en lugar de ../node_modules
Vikas Kandari

4

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 jQuery $ , por lo que la respuesta más 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);

    }
}

4

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


2


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.


2

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


1

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

3
Definitivamente debería usar en ngOnInit()lugar de esto
xordon

1
ngAfterViewInit ()
Niyaz

setTimeouten realidad no funciona si tienes muchos elementos *ngForpara renderizar.
claudchan

1

Esto es lo que funcionó para mí: Angular 2 con webpack

Intenté declarar $como tipo, anypero 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)


Tenga en cuenta que su aplicación tardará 5 veces más en arrancar.
Jake

@jake ¿se debe al tiempo que lleva cargar las bibliotecas de arranque?
raghav710

No, jquery lleva más tiempo. bootstrap! == twitter bootstrap
jake

@jake ¡Uy! Me refería a jquery, supongo. Gracias por la nota
raghav710

@jake, ¿te importaría explicar por qué una aplicación tardará 5 veces más en arrancar haciendo que jquery esté disponible para toda la aplicación
Marvel Moe,

1

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

1

Instalación de la Biblioteca Global como documentación oficial aquí

  1. Instalar desde npm:

    npm install jquery --save

  2. 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


1

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


0

Primero, instale jQuery usando npm de la siguiente manera:

npm install jquery  save

En segundo lugar, vaya al archivo ./angular-cli.json en la raíz de la carpeta de su proyecto CLI Angular, y encuentre los scripts: propiedad [] e incluya la ruta a jQuery de la siguiente manera:

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

Ahora, para usar jQuery, todo lo que tiene que hacer es importarlo en cualquier componente que desee usar jQuery.

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

Eche un vistazo al siguiente código que usa jQuery para animar div al hacer clic, especialmente en la segunda línea. Estamos importando todo como $ desde 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");
        });
    });
  }
}

-1

Instalar jquery

Terminal $ npm install jquery

(Para bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Luego agregue la importdeclaración a app.module.ts.

import 'jquery'

(Para bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Ahora ya no necesitará <SCRIPT>etiquetas para hacer referencia al JavaScript.

(Cualquier CSS que desee usar aún debe ser referenciado styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

-1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.