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

Я обнаружил проблему с добавлением внешнего файла 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;

гамбург.js

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

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


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

index.html

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

тестовая страница.html

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

Can somebody guide me please?


ionic-framework javascript ionic3
person Anil Naidu    schedule 25.10.2017    source источник
comment
Можете ли вы поделиться URL-адресом вашей библиотеки JS?   -  person Sampath    schedule 25.10.2017
comment
Привет, Sampath, вот ссылка, которую я хотел интегрировать в Ionic 3 codepen.io/JoseRosario/ ручка/BWqMwK   -  person Anil Naidu    schedule 25.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

Нет необходимости во внешнем файле 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, который автоматически добавляется при открытии меню, и вы можете изменить селектор в коде CSS с .open на menu-content-open.

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

person Peter Wilson    schedule 25.10.2017
comment
Привет, Питер, когда я добавил то же самое в app.module.ts, он выдал ошибку, подобную этой TypeError: Cannot read property 'addEventListener' of null /build/main.js:1505:13 Object.243() /build/vendor .js:55:30 __webpack_require__() /build/main.js:1309:70 Object.224() /build/vendor.js:55:30 __webpack_require__() /build/vendor.js:26:23 webpackJsonpCallback() /сборка/main.js:1:1 - person Anil Naidu; 25.10.2017
comment
Мне очень жаль, что я имел в виду app.component.ts, я отредактировал свой ответ, здесь вы можете найти хук под названием ngOnInit, чтобы поместить внутрь свой код. - person Peter Wilson; 25.10.2017
comment
Не могли бы вы предоставить фрагменты кода из самого вашего ионного приложения. - person Peter Wilson; 25.10.2017