¿Cómo usar jQuery con Angular?

Presta atención porque en esta sección hallarás la contestación que buscas.Esta sección fue evaluado por nuestros especialistas para garantizar la calidad y veracidad de nuestro contenido.

Solución:

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 solo podría usar any como el tipo para $ o jQuery

En su componente angular, debe hacer referencia a un elemento DOM de la plantilla usando @ViewChild() Una vez inicializada la vista, puede utilizar el nativeElement propiedad de este objeto y pasar a jQuery.

declarando $ (o jQuery) ya que 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: `
        item option
        
        
 selectedValue
`
)
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á chosen no siendo una propiedad en $, para arreglar esto puede agregar una definición a la interfaz JQuery en su archivo *.d.ts personalizado

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

Esto es lo que funcionó para mí.

PASO 1 – Lo primero es lo primero

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

PASO 2 – IMPORTAR

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

#ACTUALIZAR – Feb - 2017

Últimamente, estoy escribiendo código con ES6 en lugar de typescript y soy capaz de import sin * as $ en el import statement. Esto es lo que parece ahora:

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

Buena suerte.

¿Por qué todos lo están convirtiendo en una ciencia espacial? Para cualquier otra persona que necesite hacer algunas cosas básicas en static elementos, por ejemplo, body etiqueta, solo haz esto:

1. En index.html agregar script etiqueta con la ruta a su jquery lib, no importa dónde (de esta manera también puede usar etiquetas condicionales de IE para cargar una versión más baja de jquery para IE9 y menos).
2. En tus export component block tiene una función que llama a tu código: $("body").addClass("done"); Normalmente, esto provoca un error de declaración, así que justo después de todas las importaciones en este archivo .ts, agregue declare var $:any; y usted es bueno para ir!

Si posees algún titubeo y disposición de progresar nuestro tutorial puedes añadir una crítica y con gusto lo analizaremos.

---

---

Utiliza Nuestro Buscador