使用 jQuery 的自定义 javascript 代码无效 Angular 5 (angular-cli)

Question

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

步骤：

已使用以下命令安装 jquery

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

脚本：[
"../node_modules/jquery/dist/jquery.js",
"assets/js/main.js" ]

现在 main.js 中的以下功能（我选择了其中一个功能）无法使用。

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

class .search__box__show__hide 必须附加到未发生的正文中。我用谷歌搜索，浏览了 Whosebug 中的许多文章，并遵循了使用外部库的最佳建议，例如 angular-cli 中的 jquery，但没有成功。

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

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

这意味着 $ 可以从 jquery 中识别出来，但同样不能从 main.js 文件中识别。

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

Answer 1

我找到了解决方案。

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

之前:

<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>

Custom javascript code using jQuery is not working Angular 5 (angular-cli)