在 Angular 9 中包含和调用自定义 JS 脚本

Question

我想在我的 angular 9 项目中使用自定义浮动按钮。我在 angular.json 文件中添加了自定义 scripts.js 文件，结构如下所示。

"scripts": [
               "src/assets/js/custom/action-panel.js",
               "src/assets/js/custom/scripts.js",
           ]

下面是 scripts.js 文件中的代码

$(document).ready(function() 
  {
      $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 } );
  });

下面是我在 html 文件中使用的代码

<div class="st-actionContainer right-bottom">
<div class="st-panel">
    <div class="st-panel-header"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div>
    <div class="st-panel-contents">
        Put menu or icon links here!<br /><br />
        Or make a grid:
    </div>
    <div class="grid">
            <a href="#" class="gridChild"><i class="fa fa-cubes" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-database" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-send" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-tag" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-trophy" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-user" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-file" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-table" aria-hidden="true"></i></a>
            <a href="#" class="gridChild"><i class="fa fa-eject" aria-hidden="true"></i></a>
        </div>
</div>
<div class="st-btn-container right-bottom">
    <div class="st-button-main"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>

脚本文件引用：https://www.jqueryscript.net/menu/Material-style-Floating-Button-Panel-Plugin-For-jQuery-st-action-panel.html

我正在遵循上述做法。我的浮动按钮在单击时没有响应，有时浮动按钮有时会无处不在，但其余时间却没有。谁能告诉我哪里错了

Answer 1

您有赛车状况。像这样测试它：

$(document).ready(function() 
  {
      alert($('.st-actionContainer')); // to check during debugging wether that button is already in the DOM
      $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 } );
  });

确保

 $('.st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300  );

在

之后调用

<div class="st-actionContainer right-bottom">

已经加载到DOM。（例如使用 ngAfterViewInit）

一般来说，jQuery 和 Angular 并不能构成完美的组合，因为有两种基本不同的 Web 应用程序处理方式。

在 Angular 9 中包含和调用自定义 JS 脚本

Including and Calling a Custom JS Script in Angular 9

javascript

jquery

angular

angular9