javascript - 在 ionic 4 中使用 .js 文件

Question

我是 ionic 的新手，我想在一页中使用 .js 文件

我有一个 .js 文件，它在 Canvas 中创建气泡，

我想做的是，想在我的 ionic 4 项目中使用那个 .js 文件，并在我的主页上显示气泡。

这是 Link对于我想使用的代码笔

我在 'assets/js/bubblefile.js' 中创建了文件，但我不知道如何在我的 中使用 'bubblefile.js' 文件>home.html 还是 home.ts？下面是我的代码。

已编辑

home.html 代码:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

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

</ion-content>

home.ts代码

import { Component } from '@angular/core';
import './assets/js/bubblefile';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

}

bubblefile.js代码

var nodes = new vis.DataSet([
    {label: "Pop"},
    {label: "Alternative"},
    {label: "Rock"},
    {label: "Jazz"},
    {label: "Hits"},
    {label: "Dance"},
    {label: "Metal"},
    {label: "Experimental"},
    {label: "Rap"},
    {label: "Electronic"},
]);
var edges = new vis.DataSet();

var container = document.getElementById('bubbles');
var data = {
    nodes: nodes,
    edges: edges
};

var options = {
    nodes: {borderWidth:0,shape:"circle",color:{background:'#F92C55', highlight:{background:'#F92C55', border: '#F92C55'}},font:{color:'#fff'}},
    physics: {
        stabilization: false,
        minVelocity:  0.01,
        solver: "repulsion",
        repulsion: {
            nodeDistance: 40
        }
    }
};
var network = new vis.Network(container, data, options);


// Events
network.on("click", function(e) {
    if (e.nodes.length) {
        var node = nodes.get(e.nodes[0]);
        // Do something
        nodes.update(node);
    }
});
export { nodes, edges, container, data, options, network };

项目结构

任何帮助或建议将不胜感激，

谢谢

Answer 1

如果你想在 HTML 文件中使用它:

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

如果你想在 JavaScript/TypeScript 文件中使用它:

将此添加到 bubblefile.js 的底部:

export { nodes, edges, container, data, options, network };

在你想要使用它的文件的顶部:

import "./assets/js/bubblefile";