Как я могу импортировать внешний файл JS в Ionic 3

1

Я нахожу проблему с добавлением внешнего js файла в Ionic 3. Вот что я сделал, я создал файл hamburg.js в src/js/hamburg.js и назвал файл сценария в index.html в app/index.html. И я добавил html-код в testpage.hmtl и css в testpage.scss. Также объявлено в app.component.ts. Вот мой код

app.component.ts объявляет var wrapperMenu;

hamburg.js

var wrapperMenu = document.querySelector('.wrapper-menu');

wrapperMenu.addEventListener('click', function(){


wrapperMenu.classList.toggle('open');
})

index.html

<script src="assets/js/hamburg.js"></script>

testpage.html

<div class="wrapper-menu">
<div class="line-menu half start"></div>
<div class="line-menu"></div>
<div class="line-menu half end"></div>

Может ли кто-нибудь помочь мне, пожалуйста?

  • 0
    Можете ли вы поделиться URL вашей библиотеки JS?
  • 0
    Привет, Sampath, вот ссылка, которую я хотел интегрировать в Ionic 3 codepen.io/JoseRosario/pen/BWqMwK
Теги:
ionic-framework
ionic3

1 ответ

0

Нет необходимости в внешнем js файле, этот плагин играет в основном с CSS.

этот фрагмент

var wrapperMenu = document.querySelector('.wrapper-menu');
 wrapperMenu.addEventListener('click', function(){
 wrapperMenu.classList.toggle('open');  
})

можно поместить в файл app.component.ts. или если у вас есть отдельный компонент для заголовка, лучше поместить код в его файл ts именно на ngOnInit().

Изменить лучший крючок в жизненном цикле компонента - это превратить этот код в ngAfterViewInit().

Редактирование 2: Еще одна хорошая практика заключается в том, чтобы использовать предопределенное menu-content-open класса menu-content-open, которое автоматически добавляется при открытии меню, и вы можете изменить селектор в коде CSS с .open на menu-content-open

проверьте мой раздвоенный пример с вашего оригинального здесь.
Обратите внимание, что код будет работать идеально, когда вы добавите его в ионное приложение.

Поделиться
  • 0
    Привет, Питер! Когда я добавил то же самое в app.module.ts, он выдал ошибку, похожую на эту: Ошибка типа: невозможно прочитать свойство addEventListener со значением null & nbsp; /build/main.js: 1505: 13 Object.243 () & nbsp; /build/vendor.js:55:30 __webpack_require __ () & nbsp; /build/main.js: 1309: 70 Object.224 () & nbsp; /build/vendor.js: 55: 30 __webpack_require __ () & nbsp; / build / vendor.js: 26: 23 webpackJsonpCallback () & nbsp; /build/main.js: 1: 1
  • 0
    Мне очень жаль, что я имел в виду app.component.ts, я отредактировал мой ответ, здесь вы можете найти хук с именем ngOnInit, чтобы поместить ваш код внутрь
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню