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

Posted 2023-03-13

【中文标题】如何在 Ionic 3 中导入外部 JS 文件

【英文标题】：How can I importing external JS file in Ionic 3

【发布时间】：2018-04-06 02:47:52

【问题描述】：

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

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>

有人可以指导我吗？

【问题讨论】：

可以分享一下你的JS库的网址吗？

嗨 Sampath，这是链接，我想将其集成到 Ionic 3 codepen.io/JoseRosario/pen/BWqMwK

【参考方案1】：

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

这个sn-p

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

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

编辑组件life-cycle最好的钩子是把这段代码放到ngAfterViewInit()钩子里。

编辑 2： 另一个好的做法是使用在打开菜单时自动添加的预定义类 menu-content-open，您可以将 CSS 代码中的选择器从 .open 更改为 @ 987654328@

从你原来的here查看我的分叉示例。 请注意，当您将代码添加到 ionic 应用程序时，代码将完美运行。

【讨论】：

嗨彼得，当我在 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()  /build/main.js:1:1

很抱歉我的意思是 app.component.ts，我编辑了我的答案，在这里你可以找到一个名为 ngOnInit 的钩子来将你的代码放入其中

您能否提供来自您的 ionic 应用程序本身的代码的 sn-ps。