如何在 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 lib：

npm install @types/jquery --save-dev

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

Answer 1

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' }) ]

Answer 2

可以通过以下方式完成。

1. 最佳 - 将其导入到组件文件中。

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

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

     • import * as $ from 'jquery'; .
     • OR - import 'jquery';并声明这两个(作为全局变量( -
       • declare let $:any;
       • declare let jQuery:any;

2. 非最佳 - 还可以在根项目的文件夹下存在的index.html src/ head中包含jQuery CDN link。

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