Question

我想在Angular2指令中包装一些jQuery代码。

我使用以下命令将Typings的jQuery库安装到我的项目中：

typings install dt~jquery --save --global

所以现在我的项目目录下的jquery文件夹下有typings/global个文件夹。此外，我的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。下一步是什么？

Answer 1

第1步：在项目中获取jquery

npm install jquery

第2步：为jquery添加类型

npm install -D @types/jquery

第3步：在您的组件中使用它！

import * as $ from 'jquery';

准备好使用$！

Answer 2

如果您使用的是“@ angular / cli”，请安装：

npm install jquery --save

第二步安装：

install: npm install @types/jquery --save-dev

在根目录上的“angular-cli.json”中找到你的文件名，然后添加内容如下：

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

现在它会起作用。

Answer 3

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: `
  <div id="{{elementId}}" #modalcontainer class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body" (click)="closeModal()">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  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');
    }
  }
}

Answer 4

你应该有一个指向你的jquery输入文件的typings.json。然后：

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';

然后像往常一样使用$。

Answer 5

您还可以在index.html的script部分的普通head标记中加载jQuery Javascript文件。

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js" />

        ...
    </head>
    ...

然后在你需要的组件或指令中，只需声明jQuery所需的$变量，因为你没有所需插件的所有插件：

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

declare var $: any;

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}

Answer 6

我认为使用带有角度2的jquery应该是个问题。如果正确安装了jquery的类型和依赖关系，那么在角度2中使用jquery应该不是问题。

我能够在我的angular 2项目中使用jquery并正确安装。通过正确的安装，我的意思是安装jquery类型以便在打字稿中识别它。

之后，我能够以下列方式使用jquery：

jQuery(document).ready({
    ()=>{
        alert("Hello!");
    };
});

如何将jQuery导入Angular2 TypeScript项目？

6 个答案: