外部 JS 文件单击事件在 angular 8 中不起作用

Question

I am learning Angular 8 and I came across one issue. I have downloaded one HTML template and I am integrating that template to angular.

While clicking on button. It is expanding and displaying menus.

I have js file in assets folder scripts.js. And that scripts.js file contains jquery code to open and close this menu. But after adding html code to html of my component file this click event is not working. When I am checking source in browser I can see scripts.js is loaded in browser. But I am not sure why it is not calling click event. Below is html code for click event.

<div class="header-close">
            <svg viewBox="0 0 100 25">
                <path id="curve_close" fill="#B4E3F2" d="M100, 25 C62.5, 25, 62.5, 25, 50, 25 S37.5, 25, 25, 25"
                        data-start-d="M100, 25 C62.5, 25, 62.5, 25, 50, 25 S37.5, 25, 25, 25"
                        data-end-d="M100, 25 C62.5, 25, 62.5, 0,  50, 0  S37.5, 25, 0,  25"/>
            </svg>
            <a href="javascript:;" id="menu-close"><i class="fa fa-close"></i></a>
        </div>


        <div class="header-tool">
            <div class="entry-tool">

                <svg viewBox="0 0 100 25">
                    <path id="curve_open" fill="#B2E2F2" d="M0, 0 C37.5, 0, 37.5, 25, 50, 25 S62.5, 0, 100, 0"
                        data-start-d="M0, 0 C37.5, 0, 37.5, 25, 50, 25 S62.5, 0, 100, 0"
                        data-end-d="M0, 0 C37.5, 0, 37.5, 0, 50, 0 S62.5, 0, 100, 0" />
                </svg>
                <a href="javascript:;" id="menu-handler"><i class="fa fa-bars"></i></a>
            </div>
        </div>

ID for my anchor tag is menu-handler . and code written in scripts.js is as below.

    // Menu event handler
var toggleMenu = function(close_menu){
    $('#header').find('.entry-header').toggleClass('show-menu');
    $('#header').find('.entry-header').slideToggle();

    $('#menu-handler').hide();
    $('#menu-close').hide();
    setTimeout(function(){
        if( close_menu ){ $('#menu-handler').fadeIn(); }
        else{ $('#menu-close').fadeIn(); }
    }, 800);
};

$('#menu-handler').on('click', function(){
toggleMenu(false);

    TweenMax.to($('#curve_open'), 0.4, {attr: {'d': $('#curve_open').data('end-d')}});
    setTimeout(function(){
        $('.header-close').show();
        $('.header-tool').hide();
        TweenMax.to($('#curve_close'), 0.4, {attr: {'d': $('#curve_close').data('end-d')}});
    }, 400);
});

I am also not getting any error while click on button. I am not sure can we call external js functions directly from component html pages? or I have to use angular events like (click) and then call this.

Answer 1

Try this approach

import '..path../js/external-js-file.js';

declare var externalJsFile: any; // variable as the name of the function inside external-js-file.js

export class MyComponent {

    doSomething() {
        new externalJsFile(); // execute function 
    }

}