使用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模块的全部目的是为了避免你遇到的问题，而是你拥有所有可能世界中最糟糕的，最高可实现的复杂性。 –

回答