web-dev-qa-db-ja.com

ionic 4で.jsファイルを使用します

Ionicは初めてですが、1ページで.jsファイルを使用したい

キャンバスにバブルを作成する.jsファイルがあります。

私がやりたいのは、その.jsファイルを私のionic 4プロジェクトで使用し、ホームページにバブルを表示したいということです。

これが私が使いたいその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

どんな助けや提案も歓迎されます、

ありがとう

javascripttypescriptionic-frameworkionic4
2
Kaushik Makwana

@sivakumar Answerから、.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);
        }
    });
})
0
Kaushik Makwana

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 };
})
1
siva kumar

HTMLファイルで使用する場合：

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

javaScript/TypeScriptファイルで使用する場合：

これをbubblefile.jsの下部に追加します。

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

使用するファイルの先頭：

import "./assets/js/bubblefile";
1
Jack Bashford

非同期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();
0
shivam srivastava