1
votes

Comment utiliser des codes jquery personnalisés dans un projet angular 6?

Ceci est un code jquery dans mon modèle HTML . J'utilise un modèle HTML et le découpé en différents composants et créé un projet angulaire .

   //  class add mouse hover
   jQuery('.custom-nav > li').hover(function(){
      jQuery(this).addClass('nav-hover');
   }, function(){
      jQuery(this).removeClass('nav-hover');
   });

Ce code ne fonctionne pas.

Le fichier est enregistré dans un dossier nommé assets à l'intérieur de node_modules en tant que scripts_custom.js . Le fichier est inclus dans angular.json.

Je suis nouveau dans angular6 . Aidez-moi à le corriger.

angular angular6

5 commentaires

pourquoi ne pas utiliser la directive à la place pour ajouter une classe?

Merci pour le commentaire @CruelEngine. En fait, je suis nouveau sur angular6. Je viens de copier la page js sur les modules de nœuds et j'ai essayé. Pourriez-vous s'il vous plaît me donner une biche pour convertir cela?

veuillez regarder stackoverflow.com/a/42633254/3769965

@RaruChempazhanthy vérifiez le commentaire ci-dessus

Utiliser JQuery dans Angular, c'est comme équiper un vaisseau de roues: c'est possible, mais cela ne veut pas dire que c'est utile. Peut-être que le mouvement de la roue fera fonctionner votre vaisseau, mais ce n'est peut-être pas la façon dont il a été conçu pour fonctionner

4 Réponses :

2
votes

Ce n'est pas une bonne pratique d'inclure jquery dans un projet angulaire, mais vous voulez toujours l'utiliser, vous pouvez écrire declare $ any dans le fichier de composant après toute la section d'importation

S'il vous plaît laissez-moi savoir si cela résout votre problème

0 commentaires

1
votes

Je suis d'accord avec @Ankur Shah, ce n'est pas une bonne pratique d'utiliser Jquery dans un projet angulaire. À la place, vous pouvez utiliser une directive personnalisée ou utiliser les événements (mouseenter) et (mouseleave).

Consultez le lien ci-dessous toggleclass

0 commentaires

1
votes

Pour inclure du code jQuery dans votre composant, procédez comme suit:

Étape 1: Ajoutez jQuery dans votre index.html

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  //Add jQuery here
}

Étape 2: Déclarez jQuery dans votre composant où vous souhaitez ajouter ce code comme suit

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

J'espère que cela fonctionnera pour vous. Merci

0 commentaires

1
votes

Cette vidéo m'a aidé à résoudre le problème.

https://www.youtube .com / watch? v = IlgsWcYnPdo

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'frontend';
  ngOnInit(){
    $(document).ready(function(){
    //  class add mouse hover
    jQuery('.custom-nav > li').hover(function(){
      jQuery(this).addClass('nav-hover');
      }, function(){
        jQuery(this).removeClass('nav-hover');
      });
    });
  }
}

J'espère que c'est un bon moyen de le résoudre. Merci à tous.

0 commentaires