Como usar o jQuery com Angular?


343

Alguém pode me dizer, como usar o 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 classe ou o ID do elemento DOM antecipadamente, mas espero uma maneira mais limpa de fazer isso.


2
Não sei qual a versão que você estava usando no momento que você postou, mas para mim acrescentando JQuery CDN em index.html é suficiente para chamar $ em um componente
theFreedomBanana


10
Embora algumas funcionalidades do jQuery (especialmente plugins ou jQueryUI) possam ser muito úteis em um aplicativo Angular2, não é uma prática recomendada consultar e manipular o DOM de dentro dos componentes do Angular2, conforme descrito em sua pergunta. Nos aplicativos Angular2, os elementos DOM que você deseja manipular devem estar vinculados ao seu modelo de componente. O estado dos elementos DOM deve mudar de acordo com as alterações do modelo. Confira esta resposta: stackoverflow.com/questions/42411744/best-practice-of-angular-2
Benyamin Shoham

6
Eu acho que a resposta correta para isso é: você não. Angular é mais avançada e mais recente do que jQuery, não é ultrapassada e tem um código muito mais limpo
mast3rd3mon

7
Por que uma pessoa deve usar o JQuery com o Angular?
Cristian Traìna

Respostas:


331

Usar o jQuery do Angular2 é muito fácil comparado ao ng1. Se você estiver usando o TypeScript, poderá primeiro fazer referência à definição de texto datilografado do jQuery.

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

As definições de TypeScript não são necessárias, pois você pode usar apenas anycomo o tipo para $oujQuery

No seu componente angular, você deve referenciar um elemento DOM do modelo usando @ViewChild()Depois que a visualização foi inicializada, você pode usar a nativeElementpropriedade desse objeto e passar para o jQuery.

Declarar $(ou jQuery) como JQueryStatic fornecerá uma referência digitada ao 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 exemplo está disponível no plunker: http://plnkr.co/edit/Nq9LnK?p=preview

O tslint se queixará de chosennão ser uma propriedade em $. Para corrigir isso, você pode adicionar uma definição à interface JQuery no seu arquivo * .d.ts personalizado

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

2
Não sei por que a setTimeoutsolução alternativa é necessária. Eu tentei com vários outros componentes do jQuery e parece que todos eles exigem essa solução alternativa para a inicialização correta. Espero que isso irá mudar em futuras versões do NG2
werenskjold

7
novos retornos de chamada foram adicionados no alpha37 github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md core: adicionado ganchos afterContentInit, afterViewInit e afterViewChecked (d49bc43), fecha o # 3897
Mourad Zouabi

18
isso não é tão difícil de configurar, mas certamente não é "fácil" em comparação com o angular 1. no angular 1, você não precisava fazer nada e podia usar o jquery em qualquer lugar. O angular 1 é construído sobre o jquery.
user428517

8
Depois de instalar definições por meio de digitações, o JQueryStatic ainda não é reconhecido.
Gonzalo

4
Eu acho que nós precisamos atualizar isso um pouco como agora usamos NPM para tipagens
Jackie

122

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

  1. No index.html, adicione scripttag com o caminho para sua jquery lib, não importa onde (dessa forma, você também pode usar tags condicionais do IE para carregar a versão inferior do jquery para o IE9 e menos).
  2. No seu export componentbloco, tenha uma função que chama seu código: $("body").addClass("done");Normalmente, isso causa erro de declaração; logo, depois de todas as importações nesse arquivo .ts, adicione declare var $:any;e você estará pronto !

20
Não funciona para mim. Então, eu vou estudar ciência de foguetes. :)
Prajeet Shrestha 23/08/16

11
O ponto do angular 2 é remover a complexidade de lidar com o DOM. O Angular 2 possui um algoritmo diff que renderizará seus componentes de forma eficiente, por isso é melhor enganar o jquery que ele está manipulando o DOM apontando-o para o componente angular 2, em vez de manipular diretamente o DOM.
ken

4
intellisense, meu amigo, é por isso
Ayyash

5
declare var $:any;para a vitória!
tylerlindell

2
Definitivamente, isso funciona, mas se você não vive mais na idade da pedra, siga a resposta aceita.
jlh

112

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, eu estou escrevendo código com ES6em vez de typescripte sou capaz de import, sem * as $no import statement. É assim que parece agora:

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

Boa sorte.


50
Demorei uma hora para descobrir como colocar o jQuery no Angular 2 (corretamente) ... Certamente o desenvolvimento da web está retrocedendo.
Starboy

11
Para importar $ do trabalho 'jquery', você precisa definir --allowJs
titusfx

11
import * as $ from 'jquery';em app.module.ts para disponibilizá-lo para todo o projeto. E btw: "Por que --save em vez de --save-dev?"
Martin Schneider

3
import $ from 'jquery';Essa é a declaração de importação de jquery mais bonita desta página. Exatamente como eu gostaria que fosse.
precisa saber é o seguinte

11
@ Starboy, porque você não precisa de nenhum JQuery em um aplicativo Angular e, se precisar, provavelmente está fazendo algo errado.
phil294

55

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 isso logo após as instruções de importação e antes do decorador de componentes.

Para acessar qualquer elemento com o ID X ou Classe X, basta fazer

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

Verificado, isso funciona para o angular 2 com webpack (um modelo de SPA gerado pelo yeoman Aspnetcore SPA). Muitas vezes, a abordagem mais simples funciona melhor! Obrigado.
binjiezhao

11
Eu estou usando no meu projeto, mas a falta desse método é que estamos a perder toda a capacidade de tipo forte de tipos jQuery :)
trungk18

Trabalhando no Angular 6 (6.0.3) #
Alejandro Morán

Trabalhando em: Angular CLI: 7.1.4 Nó: 10.15.0
Lance

28

Uma maneira simples:

1. inclui 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. use

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

Trabalhou para mim. Mas em vez de implementos onInit (que Angular não queria aceitar) I usado dentro MyComponent ngOnInit () {// my jQuery aqui}
Ilya Kushlianski

25

Por favor, siga estes passos simples. Funcionou para mim. Vamos começar com um novo aplicativo angular 2 para evitar qualquer confusão. Estou usando o Angular cli. Portanto, instale-o se ainda não o tiver. https://cli.angular.io/

Etapa 1: criar um aplicativo demo angular 2

ng new jquery-demo

Você pode usar qualquer nome. Agora verifique se está funcionando executando abaixo do cmd (agora, verifique se está apontando para 'jquery-demo' se não usar o comando cd)

ng serve

você verá "o aplicativo funciona!" no navegador.

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

Execute este comando no cli (certifique-se de que está apontando 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 solicitará entradas, basta pressionar enter para todos, se você quiser valores padrão e, no final, digite "Yes" quando perguntar "Parece bom?"

Agora você pode ver um novo arquivo (bower.json) na pasta "jquery-demo". Você pode encontrar mais informações em 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 do jquery. Agora você tem o jquery instalado na pasta 'bower_components'.

Etapa 4: adicione o local do jquery no arquivo 'angular-cli.json'

Abra o arquivo 'angular-cli.json' (presente na pasta 'jquery-demo') e adicione o local da jquery em "scripts". Isso parecerá assim:

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

Etapa 5: escreva código jquery simples para teste

Abra o arquivo 'app.component.html' e adicione uma linha de código simples. O arquivo terá a seguinte aparência:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Agora abra o arquivo 'app.component.ts' e adicione a declaração e código da variável jquery para a tag 'p'. Você também deve usar o gancho de ciclo de vida ngAfterViewInit (). Após fazer as 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. Deveria funcionar.


3
NA MINHA HUMILDE OPINIÃO. Essa é a melhor abordagem que ainda uso o bower para dependências do lado do cliente.
Fırat KÜÇÜK

" $("p").click(function(){ $(this).hide(); });" melhor exemplo de quando não usar jQuery no Angular ?!
Martin Schneider

3
Não é mais fácil configurar apenas usando o npm? npm install jquery --save, em seguida "scripts":["../node_modules/jquery/dist/jquery.js"], import $ from 'jquery';em arquivos * .ts. Qual é a vantagem do uso de caramanchão?
precisa saber é o seguinte

11
@cs_pupil Você também pode usar o npm, mas o Bower foi projetado para gerenciar apenas pacotes de front-end. Faça uma pesquisa stackoverflow.com/questions/18641899/…
AmanDeepSharma

11
@AmanDeepSharma, thanks! Curiosamente, porém, parece que o caramanchão foi preterido. npm install bowerrendeu: npm WARN deprecated bower@1.8.0:( stackoverflow.com/a/31219726/3806701 )
cs_pupil

13

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

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

Cuidado ao usar o roteador, pois angular2 pode reciclar visualizações. Portanto, você deve ter certeza de que as manipulações dos elementos DOM são feitas apenas na primeira chamada de afterViewInit. (Você pode usar variáveis ​​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;
        }
    }
}

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

12

Eu faço isso de maneira mais simples - primeiro instale o jquery pelo npm no console: npm install jquery -Se depois no arquivo componente eu apenas escrevo: let $ = require('.../jquery.min.js')e funciona! Aqui exemplo completo de alguns dos meus códigos:

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

No teplate eu tenho, por exemplo:

<div class="departments-connections-graph">something...</div>

EDITAR

Como alternativa, em vez de usar:

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

usar

declare var $: any;

e no seu index.html coloque:

<script src="assets/js/jquery-2.1.1.js"></script>

Isso inicializará o jquery apenas uma vez globalmente - isso é importante, por exemplo, para o uso de janelas modais no bootstrap ...


Eu não sei, eu nunca uso angular-cli, mas eu uso angular2-webpack-starter e funciona lá.
Kamil Kiełczewski

de onde é que esse método exige?
Omeralper 28/12/16


11
Você tem um erro de digitação => console.log({ conatiner : this.container});corrigi-lo paraconsole.log({ container: this.container});
eric.dummy 5/17/17

11

etapa 1: use o comando: npm install jquery --save

Etapa 2: você pode simplesmente importar angular como:

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


}

O módulo ..node_modules / @ types / jquery / index "'não possui exportação padrão
Dmitry Grinko 14/11

10

// instalando o jquerynpm install jquery --save

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

// adicionando a biblioteca jquery ao arquivo de configuração de compilação, conforme especificado (no arquivo "angular-cli-build.js")

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

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

// adicionando a configuração do caminho relativo (em 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 a biblioteca jquery no seu arquivo componente

import 'jquery';

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

Impressionante, funciona perfeito para projetos ng-cli .. Obrigado!
Chanakya Vadla

Super liso! Estou usando o Angular-cli no meu projeto e isso é ouro! Rock on
Logan H,

Não tenho nenhum arquivo 'angular-cli-build.js': /
Gonzalo

10

Se você usa angular-cli, pode fazer:

  1. Instale a dependência :

    npm install 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. Declarar jquery :

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

Você pode encontrar mais detalhes sobre o documento oficial do angular cli


11
Isso causa o seguinte erro ao criar: ERRO no erro TS2688: Não é possível localizar o arquivo de definição de tipo para '$'.
representação

erro TS1192: O módulo '' jquery '' não possui exportação padrão
Dmitry Grinko 23/01

8

Para usar o Jquery no Angular2 (4)

Siga estes ajustes

instale a definição de tipo Jquery e Juqry

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

Para instalação da definição de tipo Jquery 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 
}

11
dup da resposta de Akash !?
Martin Schneider

7

Usando o Angular Cli

 npm install jquery --save

Em angular.json, na 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

Agora, para usar o jQuery, tudo o que você precisa fazer é importá-lo da seguinte maneira em qualquer componente que você deseja usar o jQuery.

Por exemplo, importando e usando jQuery no componente raiz

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

caminho é use./node_modules erradas em vez de ../node_modules
Vikas Kandari

4

Como sou burra, pensei que seria bom ter algum código funcionando.

Além disso, a versão de tipografia Angular2 do transferidor angular tem problemas com o jQuery $ , portanto, a resposta mais aceita não me fornece uma compilação limpa.

Aqui estão as etapas que eu tenho para trabalhar:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

Por dentro do 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

Apenas escreva

declare var $:any;

depois de todas as seções de importação, você pode usar o jQuery e incluir a biblioteca jQuery na sua página index.html

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

funcionou para mim


2


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 incluir o jQuery da seguinte maneira. 2) Inclua seu arquivo jquery em index.html antes do carregamento do 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>

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

Este trabalho para mim.


2

Estou ignorando a instalação do jquery, pois esse ponto foi mencionado em todas as postagens criadas antes da minha. Então, você já instalou o jquery. Importando t para seu componente como este

import * as $ from 'jquery';

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

Etapa no. 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 em app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Etapa no. 3: injete o serviço no 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 os contras dos dois métodos: DI jquery como um serviço vs. import * como $ from 'jquery';


1

A maneira mais eficaz que encontrei é usar setTimeout com 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 métodos de componentes podem ser usados, mas tudo o que tentei funciona melhor quando executado dentro de um setTimeout.

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

3
Você deve definitivamente usar ngOnInit()mais do que isso
xordon

11
ngAfterViewInit ()
Niyaz

setTimeoutrealmente não funciona realmente se você tiver muitos itens *ngForpara renderizar o acabamento.
claudchan

1

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

Tentei declarar $como tipo, anymas sempre que tentei usar qualquer módulo JQuery que estava recebendo (por exemplo) $(..).datepicker()não é uma função

Como eu incluí o Jquery no meu arquivo vendor.ts, simplesmente o importei para o meu componente usando

import * as $ from 'jquery';

Agora posso usar plugins Jquery (como bootstrap-datetimepicker) agora


Observe que seu aplicativo levará 5x mais tempo para inicializar.
Jake

@jake é devido ao tempo necessário para carregar as bibliotecas de inicialização?
Raghav710

Não, jquery leva mais tempo. bootstrap! == twitter bootstrap
jake 12/17

@jake oops! Eu quis dizer jquery, eu acho. Agradecimentos para a nota
raghav710

@jake você se importaria de explicar por que um aplicativo irá tomar 5x mais tempo para inicialização, fazendo jQuery disponível para toda a aplicação
Marvel Moe

1

Você também pode tentar importá-lo com o "InjectionToken". Conforme 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 definições ou tipos de tipo.

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

1

Instalação da Biblioteca Global como documentação oficial aqui

  1. Instale a partir do npm:

    npm install jquery --save

  2. Adicione os arquivos de script necessários aos scripts:

    "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Reinicie o servidor se você estiver executando, e ele deve estar funcionando no seu aplicativo.


Se você deseja usar dentro de um único componente, use import $ from 'jquery';dentro de seu componente


1

Outros já postaram. mas dou um exemplo simples aqui para ajudar alguns novos participantes.

Etapa 1: no arquivo index.html, referência jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Etapa 2: suponha que queremos mostrar div ou ocultar div ao clicar em um botão:

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

Etapa 3: no arquivo de componente abaixo, a importação declara $ como abaixo:

declare var $: any;

do que criar uma função como abaixo:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Ele funcionará com as mais recentes Angular e JQuery


0

Primeiro, instale o jQuery usando o npm da seguinte maneira:

npm install jquery  save

Segundo, vá para o arquivo ./angular-cli.json na raiz da pasta do seu projeto Angular CLI e encontre a propriedade scripts: [] e inclua o caminho para o jQuery da seguinte maneira:

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

Agora, para usar o jQuery, tudo o que você precisa fazer é importá-lo em qualquer componente que você deseja usar o jQuery.

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

Dê uma olhada no código abaixo que usa o jQuery para animar div ao clicar, especialmente na segunda linha. Estamos importando tudo como $ do 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 inicialização 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Em seguida, adicione a importdeclaração a app.module.ts.

import 'jquery'

(Para inicialização 4 ...)

import 'popper.js'
import 'bootstrap'

Agora você não precisará mais de <SCRIPT>tags para fazer referência ao JavaScript.

(Qualquer CSS que você deseja usar ainda precisa ser mencionado styles.css)

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

-1

Ao usar o Angular, tente não usar a biblioteca jquery. Tente usar os recursos e as bibliotecas que são produzidas para a estrutura angular. Se você quiser usar as funções jquery como find () , html () , closest () e etc.), sugiro usar os js puros. exemplo: querySelector () , innerHTML , parentElement e etc ...

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.