使用Angular Cli

 npm install jquery --save

在角。脚本下的Json数组

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

现在要使用jQuery，您所要做的就是将它导入到您想要使用jQuery的任何组件中。

例如在根组件中导入和使用jQuery

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

下面是对我有用的——带webpack的Angular 2

我尝试将$声明为任何类型，但每当我尝试使用任何JQuery模块时，我都会得到(例如)$(..).datepicker()不是一个函数

因为我有Jquery包含在我的供应商。ts文件，我只是将它导入到我的组件使用

Import * as $ from jquery;

我现在能够使用Jquery插件(如bootstrap-datetimepicker)

如何在Angular2中使用Jquery

遵循以下步骤

安装Jquery和Juqry类型定义

Jquery安装npm install Jquery—save

Jquery类型定义安装npm install @types/ Jquery——save-dev

然后简单的导入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 
}

安装jquery

jquery . jquery . Terminal$ npm

(bootstrap 4…)

终端$ npm安装popper.js

终端$ npm安装引导

然后将import语句添加到app.module.ts中。

import 'jquery'

(bootstrap 4…)

import 'popper.js'
import 'bootstrap'

现在您将不再需要<SCRIPT>标记来引用JavaScript。

(任何你想要使用的CSS仍然必须在styles.css中引用)

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

//install jquery——保存

//安装类型定义为jquery类型安装dt~jquery——global——保存

//添加jquery库到build配置文件中(在"angular-cli-build.js"文件中)

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

//运行build将jquery库添加到build ng build中

//添加相对路径配置(在system-config.js中) /**映射相对路径到url。* / Const map: any = { …, ……, “jquery”:“供应商/ jquery / dist” };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

在你的组件文件中导入jquery库

import 'jquery';

下面是示例组件的代码片段

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

其他人已经发帖了。但我在这里举一个简单的例子，这样可以帮助到一些新人。

步骤1:在index.html文件中引用jquery cdn

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

步骤2:假设我们想在点击按钮时显示或隐藏div:

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

步骤3:在下面的组件文件中，import声明$如下所示:

declare var $: any;

然后创建如下函数:

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

它将与最新的Angular和JQuery一起工作