使用 jQuery 的自定义 javascript 代码不起作用 Angular 5 (angular-cli)答案

【问题标题】：Custom javascript code using jQuery is not working Angular 5 (angular-cli)使用 jQuery 的自定义 javascript 代码不起作用 Angular 5 (angular-cli)
【发布时间】：2017-11-25 20:12:14
【问题描述】：

我正在使用 Angular 5 和 angular-cli 构建一个应用程序。我已经使用 jquery 编写了自定义函数，但这些函数不起作用。让我告诉我我做了什么。

步骤：

已使用以下命令安装 jquery

npm install --save jquery
npm install @types/jquery --save （我知道这是用于打字稿中的智能感知）
创建了一个文件 main.js，我在其中保存了所有自定义函数
在 .angular-cli.json 中引用 jquery 如下

脚本：[
“../node_modules/jquery/dist/jquery.js”，
“资产/js/main.js” ]

现在 main.js 中的以下函数（我选择了其中一个函数）不起作用。

$( '.search__open' ).on( 'click', function () {
    $( 'body' ).toggleClass( 'search__box__show__hide' );
    return false;
  });

类 .search__box__show__hide 必须附加到没有发生的正文中。我用谷歌搜索，浏览了 stackoverflow 中的许多文章，并遵循了在 angular-cli 中使用外部库（如 jquery）的最佳建议，但没有运气。

如果我在我的一个组件中使用下面的代码（它是上面代码片段的一部分），那么它工作正常。

$( 'body' ).toggleClass( 'search__box__show__hide' );

这意味着 $ 可以从 jquery 中识别出来，但在 main.js 文件中却不能正常工作。

请让我知道我做错了什么，非常感谢您的帮助。

【问题讨论】：

您是否按照here 列出的步骤进行操作？后半部分展示了如何使用没有类型的库。它可能对你有用。
感谢理查兹的回复。我已经按照您提供的链接中描述的步骤操作，直到在 typings.d.ts 文件中添加类型，后面的步骤解释了如何在其中一个 .ts 文件中使用该库。但我的问题是我的 main.js（不是打字稿）文件中的代码不起作用。
你有没有想过将main.js文件转换为Typescript的想法？我不知道这会不会很困难。
我仍然希望 main.js 的解决方案，否则转换为 TS 是我最后的手段.. :(

标签： jquery angular-cli angular5

【解决方案1】：

我找到了解决办法。

问题是组件中称为 templateUrls 的所有 html 都在稍后呈现，使用 script 标签引用的脚本被评估。解决方案是，在脚本标签上使用“延迟”以确保在页面加载后评估这些脚本。

之前：

<html>
   ......
   <body>
        <app-root></app-root>
        <script src="main.js"></script>
   </body>
<html>

之后：

<html>
   ......
   <body>
        <app-root></app-root>
        <script src="main.js" defer></script>
   </body>
<html>

【讨论】：

正确的解决方法是使用 ES 模块工具（SystemJS/Webpack 等）加载/捆绑您的依赖项，而不是依赖于脚本标签排序和全局变量。 ES 模块的全部目的是避免您遇到的问题，但您却拥有所有可能世界中最糟糕的情况，以及可实现的最高复杂性。