Блог

Главная - Вопросы по программированию - События щелчка, не отвечающие внутри угловых компонентов

События щелчка, не отвечающие внутри угловых компонентов

#angular #templates #events #click #dropdown

#angular #шаблоны #Мероприятия #нажмите #выпадающий список

Вопрос:

У меня есть шаблон, который я скачал из Интернета. Шаблон содержит bootstrap.js , font-awesome.min.js и некоторые другие файлы. Я хочу преобразовать шаблон в проект Angular; поэтому я поместил все файлы css и js в ФАЙЛ ANGUALR.JSON и поместил содержимое шаблона внутрь index.html в angular. когда я компилирую с помощью команды «ng serve», результат был в порядке, и все события щелчка тоже были в порядке.

Но я не хочу, чтобы содержимое находилось в index.html в angular, поэтому я создал для него компонент и поместил в него содержимое. К моему удивлению, события щелчка, а также выпадающий список не работают. Я искал в Интернете, но пока не могу найти решение.

То, что я делал до сих пор, я поместил «console.log (‘inside’);» во все файлы js, когда я обслуживаю страницу. Я вижу журналы, означающие, что страницы загружены правильно. Но я не знаю, что еще делать

Вот пример angular.json

        "scripts": [
          "src/assets/products/js/vendor/modernizr-3.5.0.min.js",
          "src/assets/js/jquery-3.5.1.min.js",

          "src/assets/products/js/popper.min.js",
          "src/assets/products/js/bootstrap.min.js",
          "src/assets/products/js/jquery.slicknav.min.js",
          "src/assets/products/js/owl.carousel.min.js",
          "src/assets/products/js/wow.min.js",
          "src/assets/products/js/animated.headline.js",
          "src/assets/products/js/jquery.magnific-popup.js",
          "src/assets/products/js/jquery.nice-select.min.js",
          "src/assets/products/js/jquery.sticky.js",
          "src/assets/products/js/contact.js",
          "src/assets/products/js/jquery.form.js",
          "src/assets/products/js/jquery.validate.min.js",
          "src/assets/products/js/mail-script.js",
          "src/assets/products/js/jquery.ajaxchimp.min.js",
          "src/assets/products/js/plugins.js",
          
          "src/assets/products/js/slick.min.js",
          "src/assets/products/js/jquery.scrollUp.min.js",

          "src/assets/products/js/main.js",

Комментарии:

1. С предоставленной вами информацией действительно сложно понять, в чем проблема / может быть, мы можем только догадываться, например, вы не импортировали Jquery или пропустили некоторые файлы при перемещении кода из index.html

2. Показать html и Typescript

3. проблема в Angular при использовании jQuery заключается в том, что обычно вызываются функции jQuery $( document ).ready() . В Angular (или другом SPA) eventdocument.ready выполняется до создания компонента, поэтому вам в любом случае нужно снова вызвать функции в случае AfterViewInit компонента. Какие функции? проверьте функцию ready() и выполните снова (вы можете создать скрипт со всеми функциями). ПРИМЕЧАНИЕ: в общем, не очень хорошая идея смешивать Angular и jQuery