外部 JS 文件点击事件在角度 8 中不起作用

Question

我正在学习 Angular 8，但遇到了一个问题。我已经下载了一个 HTML 模板，我正在将该模板集成到 angular。

点击按钮时。它正在展开并显示菜单。

我在资产文件夹 scripts.js 中有 js 文件。该 scripts.js 文件包含用于打开和关闭此菜单的 jquery 代码。但是在将 html 代码添加到我的组件文件的 html 之后，此单击事件不起作用。当我在浏览器中检查源代码时，我可以看到 scripts.js 已加载到浏览器中。但我不确定为什么它不调用点击事件。下面是点击事件的html代码。

<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 是 menu-handler。用scripts.js编写的代码如下。

    // 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);
});

单击按钮时我也没有收到任何错误。我不确定我们可以直接从组件 html 页面调用外部 js 函数吗？或者我必须使用像 (click) 这样的角度事件，然后调用它。

Answer 1

试试这个方法

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 
    }

}