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

你可以实现生命周期钩子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;
        }
    }
}

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

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

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

Import * as $ from jquery;

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

第一步:使用命令:NPM install jquery——save

步骤2:你可以简单地导入angular:

从jquery中导入$;

就这些。

一个例子是:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

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

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

我跳过jquery的安装，因为在我之前创建的所有帖子中都提到了这一点。因此，您已经安装了jquery。像这样将t导入组件

import * as $ from 'jquery';

将工作，但还有另一种“angular”的方式来做到这一点，即创建一个服务。

一步不。1:创建jquery.service.ts文件。

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

的一步。不。2:在app.module.ts中注册服务

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

一步不。3:将服务注入到组件my-super-duper.component.ts中

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

如果有人能解释这两种方法的优缺点，我将非常感激:DI jquery as a service vs. import * as $ from 'jquery';