一个简单的方法:

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;";
}

这对我来说很管用。

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

// 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();

祝你好运。

一个简单的方法:

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;";
}

如果你使用angular-cli，你可以:

安装依赖项: NPM安装jquery NPM install @types/jquery 导入文件: 在.angular-cli的“script”部分添加“../node_modules/jquery/dist/jquery.min.js”。json文件 jquery: 在tsconfig.app.json的“types”部分添加“$”

你可以在angular cli官方文档中找到更多细节

全球库安装作为正式文档在这里

从npm安装: NPM安装jquery 在脚本中添加所需的脚本文件: “脚本”:( “node_modules / jquery / dist / jquery.slim.js” ),

重启服务器，如果你正在运行它，它应该工作在你的应用程序。

如果你想使用内部单个组件使用import $ from 'jquery';在组件内部

与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;
}