使用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了,经历了很多文章在*和遵循最好的建议,使用外部库,如jQuery的角度,但没有运气。
如果我使用下面的代码(这是上面的代码片段的一部分)在我的组件之一,那么它工作正常。
$('body').toggleClass('search__box__show__hide');
这意味着$可以从jquery中识别出来,但是它不能从main.js文件中工作。
请让我知道我一直在做什么错,你的帮助是非常感谢。
我找到了解决方案。
问题是组件中所有被称为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>
正确的修复将本来加载/捆绑您的ES模块工具(SystemJS/Webpack等)的依赖关系,而不是依赖脚本标签排序和全局变量ES模块的全部目的是为了避免你遇到的问题,而是你拥有所有可能世界中最糟糕的,最高可实现的复杂性。 –
你有没有遵循概述[这里]步骤(https://github.com/angular/angular-cli/wiki /故事的第三方-LIB)?下半部分展示了如何使用没有类型的库。它可能适合你。 –
谢谢你的回复理查兹。 我已按照提供的链接中描述的步骤操作,直到在typings.d.ts文件中添加类型为止,后面的步骤说明了如何在.ts文件中使用该库。但我的问题是,我的主要代码。js(不是打字稿)文件不起作用。 –
你有没有想过将main.js文件转换为Typescript?我不知道这是否会有困难。 –