У меня есть несколько внешних файлов JQuery, поставляется вместе с шаблоном Bootstrap. На самом деле JQuery для SideBar меню, чтобы открыть / закрыть меню. Я создал для него отдельный компонент.
Проблема:
Когда я помещаю этот внешний файл JQuery в файл index.html или angular.json, он не работает, и даже событие щелчка не получает триггер.
Index.html
<body id="page-top">
<app-root></app-root>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/stylish-portfolio.js"></script>
</body>
Angular.json
"styles": [
"src/styles.css",
"src/assets/css/bootstrap.css",
"src/assets/css/stylish-portfolio.css",
"./node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"src/assets/js/jquery.min.js",
"src/assets/js/bootstrap.bundle.min.js",
"src/assets/js/jquery.easing.min.js",
"src/assets/js/stylish-portfolio.js"
]
Но, когда я добавляю этот JQuery в машинописный файл Компонента, он начинает работать.
Файл машинописного текста:
declare var $: any;
ngOnInit() {
$(".menu-toggle").click(function (e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$(".menu-toggle > .fa-bars, .menu-toggle > .fa-times").toggleClass("fa-bars fa-times");
$(this).toggleClass("active");
});
}
Насколько я знаю, любой файл JQuery, который мы храним в файле Angular.json или Index.html, должен работать. что тут не так ..