Como usar o jQuery com o Angular?

Alguém pode me dizer, como usar jQuery com Angular ?

class MyComponent { constructor() { // how to query the DOM element from here? } } 

Estou ciente de que existem soluções alternativas como manipular a class ou o id do elemento DOM antecipadamente, mas estou esperando por uma maneira mais limpa de fazê-lo.

Usando jQuery de Angular2 é uma brisa em comparação com ng1. Se você estiver usando o TypeScript, primeiro poderá referenciar a definição de typescript do jQuery.

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

TypescriptDefinitions não são necessários, pois você pode usar any como o tipo para $ ou jQuery

Em seu componente angular, você deve referenciar um elemento DOM a partir do modelo usando @ViewChild() Após a visualização ter sido inicializada, você pode usar a propriedade nativeElement deste object e passar para jQuery.

Declarando $ (ou jQuery ) como JQueryStatic lhe dará uma referência digitada para jQuery.

 import {bootstrap} from '@angular/platform-browser-dynamic'; import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core'; declare var $:JQueryStatic; @Component({ selector: 'ng-chosen', template: ` 

{{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 exemplo está disponível no plunker: http://plnkr.co/edit/Nq9LnK?p=preview

O tslint irá reclamar sobre a chosen não ser uma propriedade em $, para corrigir isso, você pode adicionar uma definição à interface do JQuery no seu arquivo * .d.ts personalizado

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

Por que todo mundo é uma ciência de foguetes? Para qualquer outra pessoa que precise fazer algumas coisas básicas sobre elementos estáticos, por exemplo, body tag, faça o seguinte:

  1. Em index.html adicione tag de script com o caminho para o seu jquery lib, não importa onde (desta forma você também pode usar tags condicionais do IE para carregar uma versão inferior do jquery para o IE9 e menos).
  2. No seu bloco de export component tem uma function que chama seu código: $("body").addClass("done"); Normalmente, isso causa um erro de declaração, portanto, apenas após todas as importações neste arquivo .ts, inclua declare var $:any; e você é bom para ir!

Isto é o que funcionou para mim.

PASSO 1 – Primeiras coisas primeiro

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

PASSO 2 – IMPORTAÇÃO

 // 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

Ultimamente, estou escrevendo código com ES6 vez de typescript e sou capaz de import sem * as $ na import statement . Isto é o que parece agora:

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

Boa sorte.

Agora ficou muito fácil, você pode fazer isso simplesmente declarando a variável jQuery com qualquer tipo dentro do controlador Angular2.

 declare var jQuery:any; 

Adicione isto logo após as instruções de importação e antes do decorador do componente.

Para acessar qualquer elemento com ID X ou Classe X, você só precisa fazer

 jQuery("#X or .X").someFunc(); 

Por favor, siga estes passos simples. Isso funcionou para mim. Vamos começar com um novo aplicativo angular 2 para evitar qualquer confusão. Eu estou usando cli angular. Então, instale-o se você não tiver já. https://cli.angular.io/

Etapa 1: crie um aplicativo demo angular 2

 ng new jquery-demo 

você pode usar qualquer nome. Agora verifique se ele está funcionando, executando abaixo cmd. (Agora, certifique-se de que você está apontando para ‘jquery-demo’ se não usar o comando cd)

 ng serve 

você verá “app funciona!” no navegador.

Etapa 2: Instalar o Bower (um gerenciador de pacotes para a web)

Execute este comando no cli (certifique-se de apontar para ‘jquery-demo’ se não usar o comando cd):

 npm i -g bower --save 

Agora, após a instalação bem-sucedida do bower, crie um arquivo ‘bower.json’ usando o comando abaixo:

 bower init 

Ele vai pedir insumos, basta pressionar enter para todos, se você quiser valores padrão e no final digite “Sim” quando ele vai perguntar “Parece bom?”

Agora você pode ver um novo arquivo (bower.json) na pasta “jquery-demo”. Você pode encontrar mais informações sobre https://bower.io/

Etapa 3: Instalar o jquery

Execute este comando

 bower install jquery --save 

Ele criará uma nova pasta (bower_components) que conterá a pasta de instalação jquery. Agora você tem o jquery instalado na pasta ‘bower_components’.

Passo 4: Adicione a localização jquery no arquivo ‘angular-cli.json’

Abra o arquivo ‘angular-cli.json’ (presente na pasta ‘jquery-demo’) e adicione a localização do jquery em “scripts”. Isso parecerá assim:

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

Passo 5: Escreva um código jquery simples para testar

Abra o arquivo ‘app.component.html’ e adicione uma linha de código simples. O arquivo ficará assim:

 

{{title}}

If you click on me, I will disappear.

Agora abra o arquivo ‘app.component.ts’ e adicione a declaração de variável jquery e o código para a tag ‘p’. Você também deve usar o gancho ngAfterViewInit () do ciclo de vida. Depois de fazer alterações, o arquivo ficará assim:

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

Agora, execute seu aplicativo angular 2 usando o comando ‘ng serve’ e teste-o. Deve funcionar.

Uma maneira simples:

1. include script

index.html

  

2. declarar

my.component.ts

 declare var $: any; 

3. use

 @Component({ selector: 'home', templateUrl: './my.component.html', }) export class MyComponent implements OnInit { ... $("#myselector").style="display: none;"; } 

Você pode implementar o gancho ngAfterViewInit () do ciclo de vida para adicionar algumas manipulações DOM

 ngAfterViewInit() { var el:any = elelemtRef.domElement.children[0]; $(el).chosen().on('change', (e, args) => { _this.selectedValue = args.selected; }); } 

Tenha cuidado ao usar o roteador porque o angular2 pode reciclar visões .. então você precisa ter certeza de que as manipulações dos elementos DOM são feitas somente na primeira chamada de afterViewInit .. (Você pode usar variables ​​booleanas estáticas para fazer isso)

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

Eu faço isso de maneira mais simples – primeiro instale o jquery pelo npm no console: npm install jquery -S e então no arquivo de componentes eu apenas escrevo: let $ = require('.../jquery.min.js') e funciona! Aqui exemplo completo de algum meu 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}); ... } } 

Na teplice eu tenho por exemplo:

 
something...

EDITAR

Alternativamente, em vez de usar:

 let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); 

usar

 declare var $: any; 

e no seu index.html coloque:

  

Isto irá inicializar jquery apenas uma vez globaly – isto é importante, por exemplo, para usar janelas modais no bootstrap …

// instalando jquery npm install jquery --save

// instalando a definição de tipo para os tipos de jquery typings install dt~jquery --global --save

// adicionando a biblioteca jquery ao arquivo de configuração de compilation conforme especificado (no arquivo “angular-cli-build.js”)

 vendorNpmFiles: [ ......... ......... 'jquery/dist/jquery.min.js' ] 

// executa a construção para adicionar a biblioteca jquery na construção build ng build

// incluindo a configuração do caminho relativo (em system-config.js) /** 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'}}; 

// importar a biblioteca jquery no seu arquivo de componente

 import 'jquery'; 

abaixo está o snipppet de código do meu componente de amostra

 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 = [90,98,56,90]; title = 'app works!'; isNumber:boolean = jQuery.isNumeric(89) constructor(){} } 

passo 1: use o comando: npm install jquery –save

passo 2: você pode simplesmente importar angular como:

import $ from ‘jquery’;

Isso é tudo .

Um exemplo seria:

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

Para usar o jQuery em Angular2 (4)

Siga estes setps

instalar a definição do tipo Jquery e Juqry

Para instalação do npm install jquery --save

Para definição de tipo de jQuery Instalação npm install @types/jquery --save-dev

e então simplesmente importe o 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 } 

Se você usa angular-cli você pode fazer:

  1. Instale a dependência :

    npm instalar jquery –save

    npm install @ types / jquery –save-dev

  2. Importe o arquivo :

    Adicione “../node_modules/jquery/dist/jquery.min.js” à seção “script” no arquivo .angular-cli.json

  3. Declare jquery :

    Adicione “$” à seção “types” do tsconfig.app.json

Você pode encontrar mais detalhes sobre cli doc angular oficial

Desde que eu sou um burro, eu pensei que seria bom ter algum código de trabalho.

Além disso, a versão do tipógrafo angular2 do angular-transferidor tem problemas com o jQuery $ , então a resposta mais aceita não me dá uma compilation limpa.

Aqui estão os passos que eu comecei a trabalhar:

index.html

  ...  ...  

Inside 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) Para acessar o DOM no 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"); } 

Você pode include o jQuery da seguinte maneira. 2) Incluir você arquivo jquery em index.html antes de cargas angular2

   Angular 2 QuickStart              

Você pode usar o Jquery da seguinte maneira, aqui estou usando o seletor de datas do 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 } }); } } 

Esse trabalho pra mim.

apenas escreva

declarar var $: any; depois de toda a seção de importação você pode usar jquery e include biblioteca jquery na página index.html

funciona para mim

Eu estou pulando a instalação do jquery desde que este ponto foi mencionado em todos os posts criados antes do meu. Então, você já instalou jquery. Importando t para o seu componente assim

 import * as $ from 'jquery'; 

vai funcionar, mas há outra maneira “angular” de fazer isso criando um serviço.

Passo não. 1: crie o arquivo 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'); 

Degrau. não. 2: registre o serviço no app.module.ts

 import { JQUERY_TOKEN } from './services/jQuery.service'; declare const jQuery: Object; providers: [ { provide: JQUERY_TOKEN, useValue: jQuery }, ] 

Passo não. 3: injetar o serviço em seu 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'); } } 

Ficarei muito grato se alguém puder explicar os prós e contras de ambos os methods: DI jquery como um serviço vs. import * como $ de ‘jquery’;

A maneira mais eficaz que encontrei é usar setTimeout com o tempo 0 dentro do construtor de página / componente. Isso permite que o jQuery seja executado no próximo ciclo de execução depois que o Angular terminar de carregar todos os componentes filhos. Alguns outros methods de componentes podem ser usados, mas tudo o que tentei funcionou melhor quando executado dentro de um setTimeout.

 export class HomePage { constructor() { setTimeout(() => { // run jQuery stuff here }, 0); } } 

Aqui está o que funcionou para mim – Angular 2 com webpack

Eu tentei declarar $ como tipo any mas sempre que tentei usar qualquer módulo JQuery eu estava recebendo (por exemplo) $(..).datepicker() não é uma function

Desde que eu tenho Jquery incluído no meu arquivo vendor.ts eu simplesmente importei para o meu componente usando

import * as $ from 'jquery';

Eu sou capaz de usar plugins Jquery (como bootstrap-datetimepicker) agora

Você também pode tentar importá-lo com o “InjectionToken”. Como descrito aqui: Use jQuery em Angular / Typescript sem uma definição de tipo

Você pode simplesmente injetar a instância global do jQuery e usá-la. Para isso, você não precisará de nenhuma definição de tipo ou tipificação.

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

Quando definido corretamente no seu 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 { } 

Você pode começar a usá-lo em seus 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(); } }