使用jQuery的自定义JavaScript代码在Angular 5（angular-cli）中不起作用

Question

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

脚步：

使用以下命令安装了jQuery
npm install-保存jQuery
npm install @ types / jquery --save（我知道这是针对打字稿中的intellisense的）
创建了一个文件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类添加到不具有快感的正文中。 我用Google搜索，遍历了stackoverflow中的许多文章，并按照最佳建议使用了外部库，例如angular-cli中的jquery，但没有运气。

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

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

这意味着$可以从jquery中识别出来，但在main.js文件中却无法使用。

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

Answer 1

我找到了解决方案。

问题是组件中所有被称为templateUrl的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>