使用jQuery的自定义javascript代码无法运行Angular 5（Angular cli）_Jquery_Angular Cli_Angular5

使用jQuery的自定义javascript代码无法运行Angular 5（Angular cli）

jquery

使用jQuery的自定义javascript代码无法运行Angular 5（Angular cli）,jquery,angular-cli,angular5,Jquery,Angular Cli,Angular5,我正在使用Angular 5和Angular cli构建一个应用程序。我使用jquery编写了自定义函数，但这些函数不起作用。让我告诉你我做了什么步骤：已使用以下命令安装jquery npm安装--保存jquery npm install@types/jquery--save（我知道这是针对typescript中的intellisense）创建了一个main.js文件，其中保存了所有自定义函数参考.angular-cli.json中的jquery，如下所示脚本：[ “./node_mo

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

步骤：

已使用以下命令安装jquery

npm安装--保存jquery
npm install@types/jquery--save（我知道这是针对typescript中的intellisense）

创建了一个main.js文件，其中保存了所有自定义函数

参考.angular-cli.json中的jquery，如下所示

脚本：[
“./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\uuuuu框\uuuuuu show\uuuuuu hide追加到未发生的正文中。我在谷歌上搜索了stackoverflow中的许多文章，并按照最佳建议使用外部库，如angular cli中的jquery，但运气不佳

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

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

这意味着可以从jquery中识别$，但在main.js文件中无法识别

请告诉我我做错了什么，非常感谢您的帮助。

我找到了解决办法

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

之前：

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


......

之后：

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


......

我找到了解决方案

之前：

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


......

之后：

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


......

您是否遵循了概述的步骤？本文的后半部分展示了如何使用没有键入的库。这可能对你有用。谢谢你的回复，理查兹。我一直遵循您提供的链接中描述的步骤，直到在typings.d.ts文件中添加类型，随后的步骤解释了如何在其中一个.ts文件中使用该库。但是我的问题是我的main.js（不是typescript）文件中的代码不起作用。你有没有想过把main.js文件转换成typescript？我不知道这是否困难。我仍然希望使用main.js解决问题，否则转换为TS是我最后的选择（您是否遵循了概述的步骤？本文的后半部分介绍了如何使用没有打字的库。这可能对您有用。感谢您的回复Richards。我已经按照您提供的链接中描述的步骤进行了操作，直到在typings.d.ts文件中添加了类型，随后的步骤解释了如何在其中一个.ts文件中使用库。但是我的问题是我的main.js（不是typescript）文件中的代码不起作用。你有没有想过将main.js文件转换为typescript？我不知道这是否会很困难。我仍然希望用main.js解决问题，否则转换为TS是我的最后手段（正确的修复方法是使用ES模块工具（SystemJS/Webpack等）加载/绑定依赖项。）不依赖于脚本标记顺序和全局变量。ES模块的全部目的是避免您遇到的问题，但您拥有所有可能的世界中最糟糕的，可实现的最高复杂性。正确的修复方法是使用ES模块工具（SystemJS/Webpack等）加载/捆绑您的依赖项ES模块的全部目的是避免您遇到的问题，但相反，您拥有所有可能的世界中最糟糕的、可实现的最高复杂性。