我是离子的新手,我想在一页中使用.js
文件
我有一个.js
文件,它在画布上创建气泡,
我想要做的是,想在我的离子4项目中使用那个.js
文件并在我的主页上显示气泡。
这是我要使用的codepen的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 };
项目结构
任何帮助或建议将不胜感激,
谢谢
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,OnInit } from '@angular/core';
import * as bubble from './assets/js/bubble';
declare var bubble: any;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
ngOninit(){
bubble();
}
}
bubble.js代码
var bubble = (function(){
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 };
})
如果要在HTML文件中使用它:
<script src="assets/js/bubblefile.js"></script>
如果要在JavaScript / TypeScript文件中使用它:
将其添加到bubblefile.js
的底部:
export { nodes, edges, container, data, options, network };
在文件的顶部,您要使用它:
import "./assets/js/bubblefile";
从@sivakumar回答我得到一些使用.js文件的提示
home.html代码:
<ion-header>
<ion-toolbar>
<ion-title>
Music Bubble
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="bubbles">
</div>
</ion-content>
home.ts代码:
import { Component, OnInit } from '@angular/core';
declare var bubble: any;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
constructor() {
}
ngOnInit(): void {
bubble();
}
}
bubblefile.js代码:
var bubble = (function(){
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);
}
});
})