0

Eu tenho um tema em HTML,CSS,JAVASCRIPT e foram usados Frameworks como Bootstrap, JQuery, etc.

Pretendo implementar o tema num projecto Angular 2, em certas páginas existem animações, manipulações do DOM que são feitas pelo fabricante do tema que gostava de ter no site tal como se encontram no tema, mas com alguma manipulação de informação lá existente.

Como faço para fazer fornecer minha informação ao JQuery vinda de um método/variável do meu componente Angular?

Ex:

onViewChecked(){
$(".classe-escolhida").click(function(){
alert("Cliclado");
});
}
2
  • Não consegue fazer tudo no Angular?
    – Woss
    Commented 19/10/2017 às 11:03
  • @AndersonCarlosWoss ja editei para melhor compreensao Commented 24/10/2017 às 5:36

1 Resposta 1

-1

Utilize declare var $: any; antes da declaração da Classe.

Exemplo:

    import { Component } from '@angular/core';
    
    declare var $: any;
    
    @Component({
      selector: 'app-modulo',
      templateUrl: './modulo.component.html',
      styleUrls: ['./modulo.component.scss']
    })
    export class ModuloComponent
    {
      constructor(){}
      
      onViewChecked(){
        $(".classe-escolhida").click(function(){
          alert("Clicado");
        });
      }
    }

Edit:

Minha resposta anterior era baseada na solução de contorno para o Angular reconhecer o jQuery, considerando que o mesmo já estivesse instalado e configurado para ser carregado na aplicação. Vamos a uma resposta mais completa:

Em primeiro lugar, instale o pacote usando NPM ou Yarn: npm install jquery --save ou yarn add jquery

Posteriormente, em seu angular.json, carregue o script do jQuery:

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

Onde exatamente isso será inserido dependerá um pouco da versão do Angular que está usando (em versões mais antigas, o arquivo inclusive é o .angular-cli.json). No caso da versão mais recente no momento que escrevo esse Edit (v13), fica no JSON em projects.$name.architect.build.options.

Por fim, inclua em seu componente:

import * as $ from 'jquery';

Em alguns casos, para resolver os problemas de validação no Typescript, ainda será necessário instalar a definição de tipos do jQuery: npm install --save-dev @types/jquery ou yarn add -D @types/jquery.

Feita a importação do jQuery e a devida configuração de tipos (types), inclua em um dos hooks (recomendo o ngAfterContentInit) o código jQuery que deseja, como no exemplo abaixo:

import { AfterContentInit, Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app-modulo',
    templateUrl: './modulo.component.html',
    styleUrls: ['./modulo.component.scss']
})
export class ModuloComponent implements AfterContentInit
{
    constructor(){}
    
    ngAfterContentInit(): void
    {
        $(".classe-escolhida").click(function(){
            alert("Clicado");
        });
    }
}

Espero que isso possa ajudar :-)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .