在离子4中使用.js文件

问题描述 投票:1回答:3

我是离子的新手,我想在一页中使用.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 };

项目结构

Project Structure

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

谢谢

javascript typescript ionic-framework ionic4
3个回答
1
投票

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 };
})

0
投票

如果要在HTML文件中使用它:

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

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

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

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

在文件的顶部,您要使用它:

import "./assets/js/bubblefile";

0
投票

从@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);
        }
    });
})
© www.soinside.com 2019 - 2024. All rights reserved.