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