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

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

一个简单的方法:

1. 包括脚本

index . html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. 声明

my.component.ts

declare var $: any;

3.使用

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

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

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

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

Import * as $ from jquery;

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

这对我来说很管用。

第一步——重要的事情先做

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

步骤2 -导入

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#更新- 2017年2月

最近，我正在用ES6而不是typescript编写代码，并且能够在导入语句中不使用*作为$导入。这是它现在的样子:

import $ from 'jquery';
//
$('#elemId').width();

祝你好运。

与ng1相比，在Angular2中使用jQuery非常简单。如果你使用的是TypeScript，你可以先引用jQuery TypeScript定义。

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions不是必需的，因为你可以使用任何类型作为$或jQuery的类型

在你的angular组件中，你应该使用@ViewChild()从模板中引用一个DOM元素，在视图初始化后，你可以使用该对象的nativeElement属性并将其传递给jQuery。

将$(或jQuery)声明为querystatic将为您提供对jQuery的类型化引用。

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

这个例子可以在plunker网站上找到:http://plnkr.co/edit/Nq9LnK?p=preview

tslint会抱怨选择不是$上的属性，为了解决这个问题，你可以在自定义的*.d中添加一个定义到JQuery接口。ts文件

interface JQuery {
    chosen(options?:any):JQuery;
}    

角12

NPM jquery

这很重要:NPM I @types/jquery

angular.json

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

.ts文件

import * as $ from "jquery";