我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用，但我所尝试的最好的工作时运行在一个setTimeout。

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

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

现在它变得非常简单，你可以通过在Angular2控制器中声明任意类型的jQuery变量来实现。

declare var jQuery:any;

将其添加在import语句之后和组件装饰符之前。

要访问任何id为X或类为X的元素，你只需要这样做

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

为什么每个人都把它搞得很复杂? 对于任何需要在静态元素上做一些基本的事情的人，例如，body标签，只需这样做:

在index.html中添加带有你的jquery库路径的script标签，不管在哪里(这样你也可以使用IE条件标签来加载IE9或更低版本的jquery)。 在导出组件块中有一个调用代码的函数:$("body").addClass("done");通常这会导致声明错误，所以在.ts文件中的所有导入之后，添加declare var $:any;你就可以开始了!

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