我正在使用带有angular-cli的Angular 5构建应用程序。我已经使用jquery编写了自定义函数,但这些函数不起作用。让我说说我做了什么。
脚步:
使用以下命令安装了jQuery
npm install --save jquery
npm install @ types / jquery --save(我知道这是针对打字稿中的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;
});
必须将.search__box__show__hide类附加到不具有快感的正文中。我用Google搜索,遍历了stackoverflow中的许多文章,并按照最佳建议使用了外部库,例如angular-cli中的jquery,但没有运气。
如果我在我的组件之一中使用下面的代码(它是上面的代码片段的一部分),则它工作正常。
$( 'body' ).toggleClass( 'search__box__show__hide' );
这意味着$可以从jquery中识别出来,但在main.js文件中却无法使用。
请让我知道我做错了什么,我们非常感谢您的帮助。
我找到了解决方案。
问题是组件中所有被称为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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句