请遵循这些简单的步骤。这对我很管用。为了避免混淆，让我们从一个新的angular 2应用开始。我使用的是Angular cli。因此，如果您还没有安装它，请安装它。 https://cli.angular.io/

步骤1:创建一个演示angular 2应用程序

ng new jquery-demo

您可以使用任何名称。现在通过在cmd下运行检查它是否正在工作。(现在，如果不使用cd命令，请确保您指向'jquery-demo')

ng serve

你会在浏览器上看到“app works!”

步骤2:安装Bower (web包管理器)

在cli下运行这个命令(如果不使用cd命令，请确保你指向的是'jquery-demo'):

npm i -g bower --save

现在在成功安装凉亭后，创建一个“凉亭”。Json文件，使用以下命令:

bower init

它会要求输入，如果你想要默认值，只需要按enter键，最后输入“Yes”，当它会问“看起来不错吗?”

现在你可以在"jquery-demo"文件夹中看到一个新文件(bower.json)。你可以在https://bower.io/上找到更多信息

步骤3:安装jquery

执行此命令

bower install jquery --save

它将创建一个新文件夹(bower_components)，其中包含jquery安装文件夹。现在你已经在“bower_components”文件夹中安装了jquery。

第四步:在angular-cli中添加jquery location。json的文件

“angular-cli开放。Json文件(目前在'jquery-demo'文件夹)，并在“脚本”中添加jquery位置。它看起来是这样的:

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

步骤5:编写简单的jquery代码进行测试

打开'app.component.html'文件，并添加一个简单的代码行，该文件看起来像这样:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

现在打开'app.component.ts'文件，并添加jquery变量声明和'p'标签的代码。你也应该使用生命周期钩子ngAfterViewInit()。修改后的文件看起来是这样的:

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

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

现在使用'ng serve'命令运行你的angular 2应用并测试它。它应该会起作用。

如何在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 
}

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

declare var jQuery:any;

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

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

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

角12

NPM jquery

这很重要:NPM I @types/jquery

angular.json

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

.ts文件

import * as $ from "jquery";

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

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

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