如何将jQuery导入Angular2 TypeScript项目？

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

您应该有一个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';

然后照常使用 $ 。