Question

这是我的jquery中的HTML template代码。我正在将HTML template和sliced用于不同的components，并创建了一个angular project。

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

此代码不起作用。

该文件以assets的形式保存在node_modules内名为scripts_custom.js的文件夹中。该文件包含在angular.json中。

我是angular6的新手。请帮我纠正它。

Answer 1

在jangle项目中包含jquery并不是一个好习惯，但是仍然要使用它，您可以在所有import节之后在组件文件中编写声明$ any

请告诉我它是否可以解决您的问题

Answer 2

我同意@Ankur Shah的观点，在有角度的项目中使用Jquery不是一个好习惯。相反，您可以使用自定义指令或使用（mouseenter）和（mouseleave）事件。

检查toggleclass下方的链接

Answer 3

要在组件中包含jQuery代码，请执行以下步骤：

第1步：将jQuery添加到您的index.html

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

第2步：将jQuery声明到您要在其中添加代码的组件中，如下所示：

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
}

希望这对您有用。谢谢

Answer 4

这段视频帮助我解决了这个问题。

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

希望这是解决它的好方法。谢谢大家。

如何在angular 6项目中使用自定义jquery代码？

4 个答案: