Блог

Я изучаю Angular 8 и столкнулся с одной проблемой. Я скачал один HTML-шаблон и интегрирую этот шаблон в angular.

При нажатии на кнопку. Он расширяется и отображает меню.

У меня есть файл js в папке активов scripts.js . И это scripts.js файл содержит код jquery для открытия и закрытия этого меню. Но после добавления html-кода в html моего компонентного файла это событие щелчка не работает. Когда я проверяю источник в браузере, я вижу scripts.js загружается в браузере. Но я не уверен, почему он не вызывает событие click. Ниже приведен 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>
 

Идентификатор для моего тега привязки — 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);
});
 

Я также не получаю никаких ошибок при нажатии на кнопку. Я не уверен, можем ли мы вызывать внешние функции js непосредственно с компонентных HTML-страниц? или я должен использовать угловые события, такие как (click), а затем вызвать это.

Попробуйте этот подход

 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 
    }

}