使用jQuery的自定義JavaScript代碼不起作用Angular 5（angular-cli）

我使用angular-cli構建了一個使用Angular 5的應用程序。我用jquery編寫了自定義函數，這些函數不起作用。讓我告訴我做了什麼。使用jQuery的自定義JavaScript代碼不起作用Angular 5（angular-cli）

步驟：

在使用以下命令

NPM安裝--save jQuery的
NPM安裝@類型/ jQuery的--save（我知道這是在打字稿智能感知）安裝的jQuery
創建的文件main.js在那裏我保存了所有的我自定義功能
稱爲jquery的在.angular-cli.json如下

腳本：[
「../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和遵循最好的建議，使用外部庫，如jQuery的角度，但沒有運氣。

如果我使用下面的代碼（這是上面的代碼片段的一部分）在我的組件之一，那麼它工作正常。

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

這意味着$可以從jquery中識別出來，但是它不能從main.js文件中工作。

請讓我知道我一直在做什麼錯，你的幫助是非常感謝。

你有沒有遵循概述[這裏]步驟（https://github.com/angular/angular-cli/wiki /故事的第三方-LIB）？下半部分展示瞭如何使用沒有類型的庫。它可能適合你。 –

謝謝你的回覆理查茲。我已按照提供的鏈接中描述的步驟操作，直到在typings.d.ts文件中添加類型爲止，後面的步驟說明了如何在.ts文件中使用該庫。但我的問題是，我的主要代碼。js（不是打字稿）文件不起作用。 –

你有沒有想過將main.js文件轉換爲Typescript？我不知道這是否會有困難。 –

-1

我找到了解決方案。

問題是組件中所有被稱爲templateUrls的htmls都是在稍後呈現時使用腳本標記引用的腳本進行評估。解決方案是，在腳本標記上使用'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>

2017-11-28 15:33:07

正確的修復將本來加載/捆綁您的ES模塊工具（SystemJS/Webpack等）的依賴關係，而不是依賴腳本標籤排序和全局變量ES模塊的全部目的是爲了避免你遇到的問題，而是你擁有所有可能世界中最糟糕的，最高可實現的複雜性。 –

回答