Question

我是离子新手，我想在一页中使用unsigned char buffer[1000]; FILE *input; FILE *output; int n = 0; int count = 0; input = fopen("memdb","rb"); output = fopen("output.out","wb"); while(!feof(input)) { n = fread(buffer,1,1000,input); count += n; fwrite(buffer,1,n,output); } fclose(input); fclose(output);文件

我有一个.js文件，该文件在画布中创建气泡

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

这是我要使用的那个Codepen的Link

我已经在.js中创建了文件，但是我不知道如何在'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

bubblefile.js代码

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

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

}

项目结构

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

谢谢

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

Answer 2

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

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

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

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

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

要在以下位置使用文件：

import "./assets/js/bubblefile";

Answer 3

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

Answer 4

有一个用于加载异步JavaScript文件的库。 https://www.npmjs.com/package/scriptjs

安装软件包：

npm i scriptjs

然后在如下所示的任何地方使用它：

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}`

OR

您可以简单地使用jquery方法在标题中添加或删除脚本标签。

要添加.js文件，请在ngOnInit（）下的以下行调用：

$('head').append('<script async src="assets/js/search.js"></script>');

删除.js文件：

document.querySelector('script[src="assets/js/search.js"]').remove();

在Ionic 4中使用.js文件

4 个答案: