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

Question

我在将外部js文件添加到Ionic 3时发现问题。这就是我所做的，我在src/js/hamburg.js<中创建了一个hamburg.js文件，并在app/index.html处调用index.html中的脚本文件。我在 testpage.hmtl 中添加了 html 代码，在 testpage.scss 中添加了 css。也在 app.component.ts 中声明。这是我的代码

app.component.ts 声明 varwrapperMenu;

汉堡.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>

有人可以指导我吗？

Answer 1

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

这个片段

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

可以放在app.component.ts文件中。或者，如果您有单独的 header 组件，最好将代码专门放在 ngOnInit() 钩子(Hook)上的 ts 文件中。

编辑组件中的最佳钩子(Hook)life-cycle就是把这段代码放入ngAfterViewInit()钩子(Hook)中。

编辑2:另一个好的做法是使用预定义的类menu-content-open，该类在打开菜单时自动添加，您可以在您的 CSS 代码从 .open 到 menu-content-open

检查我的原始示例的 fork 示例 here .
请注意，当您将代码添加到 ionic 应用程序中时，代码将完美运行。