如何将jQuery导入Angular2 TypeScript项目？
我想在Angular2指令中包含一些jQuery代码。
我使用以下命令将Typings的jQuery库安装到我的项目中：
typings install dt~jquery --save --global
所以现在我的项目目录中的typings/global文件夹下有jquery文件夹。 另外，我的typings.json文件中添加了以下新行：
{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160807145350", "jquery": "registry:dt/jquery#1.10.0+20160908203239" } }
我开始编写一个新的Angular2指令（我导入到app-module文件中），但我不知道如何正确导入jQuery库。 这是我的源文件：
import {Directive} from '@angular/core'; @Directive({ selector: "my-first-directive" }) export class MyFirstDirective { constructor() { $(document).ready(function () { alert("Hello World"); }); } }
但我不能使用也不是$ jQuery 。 你下一步怎么做？
第1步：在项目中获取jquery
npm install jquery
第2步：为jquery添加类型
npm install -D @types/jquery
第3步：在您的组件中使用它！
import * as $ from 'jquery';
准备使用$！
jQuery.service.ts
import { OpaqueToken } from '@angular/core' export let JQ_TOKEN = new OpaqueToken('jQuery');
index.ts`
export * from './jQuery.service';
app.module.ts
declare let jQuery : Object;
@NgModule({ providers: [ { provide: TOASTR_TOKEN, useValue: toastr }, { provide: JQ_TOKEN, useValue: jQuery }, }) export class AppModule { }
如何在组件中使用Jquery
import { Component, Input, ViewChild, ElementRef, Inject } from '@angular/core' import { JQ_TOKEN } from './jQuery.service' @Component({ selector: 'simple-modal', template: ` `, styles: [` .modal-body { height: 250px; overflow-y: scroll; } `] }) export class SimpleModalComponent { @Input() title: string; @Input() elementId: string; @Input() closeOnBodyClick: string; @ViewChild('modalcontainer') containerEl: ElementRef; constructor(@Inject(JQ_TOKEN) private $: any) {} closeModal() { if(this.closeOnBodyClick.toLocaleLowerCase() === "true") { this.$(this.containerEl.nativeElement).modal('hide'); } } }
如果您使用的是“@ angular / cli”，请安装：
npm install jquery --save
第二步安装：
install: npm install @types/jquery --save-dev
并在根目录中的“angular-cli.json”中找到您的文件名，并添加内部，如：
script:["../node_modules/jquery/dist/jquery.min.js"]
现在它会起作用。
你应该有一个typings.json指向你的jquery输入文件。 然后：
systemjs.config（jquery的通知映射设置）
System.config({ defaultJSExtensions: true, paths: { // paths serve as alias 'npm:': 'node_modules/' }, map: { 'app': 'app', jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', material: 'npm:material-design-lite/dist/material.min.js', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', .... }, packages: { app: { main: 'main', format: 'register', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' } }, });
在组件中：
import $ from 'jquery';
然后像往常一样使用$。
您还可以将您的jQuery Javascript文件加载到index.html的head部分中的普通script标记中。
... ...
然后在你需要的组件或指令中，只需声明jQuery所需的$ variable，因为你不需要所有插件的输入：
import {Directive} from '@angular/core'; declare var $: any; @Directive({ selector: "my-first-directive" }) export class MyFirstDirective { constructor() { $(document).ready(function () { alert("Hello World"); }); } }
我不认为使用带有角度2的jquery应该是一个问题。如果正确安装了jquery的类型和依赖性，那么在角度2中使用jquery应该不是问题。
我能够在我的角度2项目中使用jquery并正确安装。 通过正确的安装，我的意思是安装jquery类型以便在打字稿中识别它。
之后，我能够以下列方式使用jquery：
jQuery(document).ready({ ()=>{ alert("Hello!"); }; });
这是一个古老的问题，已经有了一些答案。 但是现有的答案过于复杂（来自user1089766的答案包含许多不必要的东西）。 希望这有助于新人。
将到index.html文件中。
创建jQuery.Service.ts：
import {InjectionToken} from "@angular/core"; export let jQueryToken = new InjectionToken('jQuery');
在您的模块文件中，将此jQueryToken添加到提供程序：
providers:[ { provide: jQueryToken, useValue: jQuery }]
现在@Inject(jQueryToken) ，它已准备好使用。 假设您想在组件名称ExperimentComponent中使用，然后：
import {Component, Inject, OnInit} from '@angular/core'; import {jQueryToken} from "./common/jquery.service"; @Component({ selector: 'app-experiment', templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) export class ExperimentComponent implements OnInit { constructor(@Inject(jQueryToken) private $: any) { $(document).ready(function () { alert(' jQuery is working'); }); } ngOnInit() { } }
每当您打开ExperimentComponent时，警报function都会调用并弹出消息。