在src/Main中添加下面的代码。Ts将重要的jquery和所有的功能在所有的项目

import * as jquery from 'jquery';
import * as bootstrap from 'bootstrap';

不要忘记NPM I @types/jquery和NPM I @types/bootstrap

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

你也可以尝试用InjectionToken导入它。 如下所述:在Angular/Typescript中使用jQuery而不使用类型定义

可以简单地注入jQuery全局实例并使用它。为此，您不需要任何类型定义或类型。

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

当在app.module.ts中正确设置时:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

你可以在你的组件中使用它:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

这对我来说很管用。

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

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

祝你好运。

我用更简单的方法——首先在控制台通过npm安装jquery: npm install jquery - s，然后在组件文件中我只写:let $ = require('…/jquery.min.js')，它就工作了!以下是我的一些代码的完整示例:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

在模板我有例如:

<div class="departments-connections-graph">something...</div>

EDIT

代替使用:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

use

declare var $: any;

在index.html中输入:

<script src="assets/js/jquery-2.1.1.js"></script>

这将只初始化jquery一次全局-这对于在bootstrap中使用模态窗口很重要…

你可以实现生命周期钩子ngAfterViewInit()来添加一些DOM操作

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

使用路由器时要小心，因为angular2可能会回收视图。所以你必须确保DOM元素的操作只在afterViewInit的第一次调用中完成。(你可以使用静态布尔变量来实现)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}