Включение и вызов пользовательского сценария JS в Angular 9 - PullRequest
Новая
       6

Включение и вызов пользовательского сценария JS в Angular 9

1 голос
/ 27 февраля 2020

Я хочу использовать пользовательскую плавающую кнопку в моем проекте angular 9. Я добавил пользовательские сценарии. js файл в angular. json файл, ниже показано, как выглядит структура. 

"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

Я следую вышеописанной практике. Моя плавающая кнопка не реагирует на нажатия, иногда из ниоткуда плавающая кнопка работает, но в остальное время - нет. Кто-нибудь может дать мне знать, где я иду не так

1 Ответ

1 голос
/ 27 февраля 2020

У вас гоночные условия. Проверьте это так: 

$(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 не являются идеальной комбинацией из-за двух фундаментальных подходов к веб-приложению.

...