使用jQuery的自定义JavaScript代码在Angular 5(angular-cli)中不起作用

哈努曼塔技术员

我正在使用带有angular-cli的Angular 5构建应用程序。我已经使用jquery编写了自定义函数,但这些函数不起作用。让我说说我做了什么。

脚步:

  1. 使用以下命令安装了jQuery

    npm install --save jquery
    npm install @ types / jquery --save(我知道这是针对打字稿中的intellisense的)

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

  3. 如下引用.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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章