如何在Ionic 3中导入外部JS文件

Question

我发现将外部js文件添加到Ionic 3时出现问题。这是我所做的，我在hamburg.js中创建了一个src/js/hamburg.js文件，并在index.html中调用了脚本文件app/index.html。我在testpage.hmtl中添加了html代码，在testpage.scss中添加了css。也在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>

有人可以指导我吗？

Answer 1

不需要外部js文件，这个插件主要使用CSS。

此代码段

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

可以放在app.component.ts文件中。或者如果你有标题的单独组件，最好将代码专门放在ngOnInit()挂钩的ts文件中。

编辑组件life-cycle中的最佳挂钩是将此代码放入ngAfterViewInit()挂钩。

编辑2：另一个好习惯是使用在打开菜单时自动添加的预定义类menu-content-open，您可以更改CSS代码中的选择器{{1转到.open

从原来的here检查我的分叉示例 请注意，将代码添加到离子应用程序中时，代码将完美无缺。