如何在 ionic 2 Angular 应用程序中包含 jQuery

Question

我正在创建一个 ionic 2 应用程序。我是一个新的 Angular 2 开发人员，如果我错过了一些东西，很抱歉。我想在页面组件中包含 jQuery 和其他 js 文件。

我用了这个方法：

import { Component } from '@angular/core';
import '../../assets/js/jquery-2.1.1.js';
import '../../assets/js/prog-bar.js';
import '../../assets/js/myApp.js';
import { NavController } from 'ionic-angular';

好的，它加载了文件，但它给了我错误

未捕获的引用错误：$ 未定义。

所以我尝试包含 jquery 库：

npm install @types/jquery --save-dev

但我不知道下一步该做什么。 如何在我的应用程序中以一种好的方式使用 Jquery lib， 请不要告诉我将脚本标签添加到 index.html 页面，因为每次我重新运行应用程序时它都会被删除。

Answer 1

可以通过以下方式完成。

1. Optimum - 将其导入您的组件文件中。

   • 安装 jQuery 及其类型 - npm install jquery --save npm install @types/jquery --save-dev

   • 使用以下任何一项将其导入您的*.component.ts 顶部 -

     • import * as $ from 'jquery';。
     • 或 - import 'jquery'; 并声明这两个（作为全局变量） -
       • declare let $:any;
       • declare let jQuery:any;

2. 不是最佳选择 - 您还可以在根项目的 src/ 文件夹下的 head 中包含 jQuery CDN link。

此外，在 Ionic 中，webpack.config.js 文件位于 node_modules 文件夹下，在执行 npm install 后将被替换。

Answer 2

import $ from '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' }
},
});

另外不要忘记你应该有一个指向你的 jquery 输入文件的 typings.json。

请注意，如果您没有找到 system.config.js 文件，请查找要更改的 webpack 文件。如果你找到了，webpack.config.js 只需将其添加到其中：

plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) ]