Question

我有一个jquery文件。我使用了npm install jquery --save和npm install @types/jquery --save-dev。然后，我在.angular-cli.json中导入了jquery文件。我遇到$ is not defined和jQuery is not defined错误。它不起作用。

jQuery文件内容：

var DatatablesSearchOptionsColumnSearch = function () {
    debugger;
    $.fn.dataTable.Api.register("column().title()", function () {
        return $(this.header()).text().trim()
    });
    return {
        init: function () {
            var t;
            t = $("#m_table_1").DataTable({
                responsive: !0,
                dom: "<'row'<'col-sm-12'tr>>\n\t\t\t<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",
                lengthMenu: [5, 10, 25, 50],
                pageLength: 10,
                language: {
                    lengthMenu: "Display _MENU_"
                },
                searchDelay: 500,
                ...

然后我导入angular-cli.json

"scripts": [
      "node_modules/jquery/dist/jquery.slim.js",
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery/dist/jquery.js",
      "assets/vendors/base/vendors.bundle.js",
       "assets/demo/default/base/scripts.bundle.js"
        ],

Answer 1

全局库安装为Official documentation here

从npm安装：

npm install jquery --save
将所需的脚本文件添加到脚本：

"scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

如果正在运行，请重新启动服务器，并且该服务器应该可以在您的应用程序上正常工作。

如果要在单个组件内部使用，请在组件内部使用 import $ from 'jquery';

Answer 2

我找到了答案：

标签：将在.ts文件中运行的选择器js文件

src：js文件路径

loadScript(tag, src: string, loadOnce?: boolean) {
        debugger
        loadOnce = loadOnce || false;

        if (!this._scripts[src]) {
            this._scripts[src] = { src: src, loaded: false };
        }

        return new Promise((resolve, reject) => {
            // resolve if already loaded
            if (this._scripts[src].loaded && loadOnce) {
                resolve({ src: src, loaded: true });
            } else {
                // load script tag
                let scriptTag = $('<script/>').
                    attr('type', 'text/javascript').
                    attr('src', this._scripts[src].src);

                $(tag).append(scriptTag);

                this._scripts[src] = { src: src, loaded: true };
                resolve({ src: src, loaded: true });
            }
        });
    }

如何在Angular上导入jquery文件？

2 个答案: