个人中心
gpt4 book ai didi

javascript - 在 Angular 4 中加载articles.js 库

转载 作者：行者123 更新时间：2023-11-28 17:51:43 25 4
gpt4 key购买 nike

我正在尝试在我的 Angular 项目中实现 Particles.js，但似乎未加载 Json 文件。

import { Component, OnInit } from '@angular/core';
import Typed  from 'typed.js';

declare var particlesJS: any;

@Component({
  selector: 'app-slide-presentation',
  templateUrl: './slide-presentation.component.html',
  styleUrls: ['./slide-presentation.component.css']
})

export class SlidePresentationComponent implements OnInit {
  ngOnInit(): void {
    particlesJS.load('particles-js', 'particlesjs-config.json', function() {
      console.log('callback - particles.js config loaded');
    });
  }
}

HTML

<div class="bar" id="particles-js" ></div>

我已经在index.html中导入了patricles.js文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Siteperso</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

我将 json 文件放在 html 文件的同一文件夹中。

当我运行我的项目时，出现此错误

GET http://localhost:4200/particlesjs-config.json 404 (Not Found)
particles.min.js:9 Error pJS - XMLHttpRequest status: 404
particles.min.js:9 Error pJS - File config not found

更新:

我尝试过JGFMK给出的解决方案:我创建了一个vendor.ts文件，在其中放入:

import * particlesJS from 'particlesjs';
window['particlesJS'] = particlesJS;

现在我得到了这个错误:

    Uncaught SyntaxError: Unexpected token import
        at eval (<anonymous>)
        at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
        at Object.../../../../script-loader/index.js!../../../../../vendor.ts (vendor.ts?693f:1)
        at __webpack_require__ (bootstrap b0854f7…:54)
        at Object.2 (scripts.bundle.js:93)
        at __webpack_require__ (bootstrap b0854f7…:54)
        at webpackJsonpCallback (bootstrap b0854f7…:25)
        at scripts.bundle.js:1
    webpackJsonp.../../../../script-loader/addScript.js.module.exports @ addScript.js:9
    ../../../../script-loader/index.js!../../../../../vendor.ts @ vendor.ts?693f:1
    __webpack_require__ @ bootstrap b0854f7…:54
    2 @ scripts.bundle.js:93
    __webpack_require__ @ bootstrap b0854f7…:54
    webpackJsonpCallback @ bootstrap b0854f7…:25
    (anonymous) @ scripts.bundle.js:1
    material.es5.js:3311 Could not find HammerJS. Certain Angular Material components may not work correctly.
    GestureConfig @ material.es5.js:3311
    _createClass @ core.es5.js:9509
    _createProviderInstance$1 @ core.es5.js:9484
    resolveNgModuleDep @ core.es5.js:9469
    _callFactory @ core.es5.js:9556
    _createProviderInstance$1 @ core.es5.js:9487
    resolveNgModuleDep @ core.es5.js:9469
    _createClass @ core.es5.js:9516
    _createProviderInstance$1 @ core.es5.js:9484
    resolveNgModuleDep @ core.es5.js:9469
    _createClass @ core.es5.js:9516
    _createProviderInstance$1 @ core.es5.js:9484
    resolveNgModuleDep @ core.es5.js:9469
    _callFactory @ core.es5.js:9551
    _createProviderInstance$1 @ core.es5.js:9487
    resolveNgModuleDep @ core.es5.js:9469
    webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get @ core.es5.js:10555
    debugCreateRootView @ core.es5.js:12770
    webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactory_.create @ core.es5.js:9856
    webpackJsonp.../../../core/@angular/core.es5.js.ComponentFactoryBoundToModule.create @ core.es5.js:3333
    webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.bootstrap @ core.es5.js:4762
    (anonymous) @ core.es5.js:4545
    webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap @ core.es5.js:4545
    (anonymous) @ core.es5.js:4507
    webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
    onInvoke @ core.es5.js:3890
    webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
    webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:141
    (anonymous) @ zone.js:818
    webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
    onInvokeTask @ core.es5.js:3881
    webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
    webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
    drainMicroTaskQueue @ zone.js:584
    AppComponent.html:2 ERROR ReferenceError: $ is not defined
        at MnFullpageDirective.webpackJsonp.../../../../ngx-fullpage/components/fullpage/mnFullpage.directive.js.MnFullpageDirective.ngOnInit (mnFullpage.directive.js:72)
        at checkAndUpdateDirectiveInline (core.es5.js:10834)
        at checkAndUpdateNodeInline (core.es5.js:12330)
        at checkAndUpdateNode (core.es5.js:12269)
        at debugCheckAndUpdateNode (core.es5.js:13130)
        at debugCheckDirectivesFn (core.es5.js:13071)
        at Object.eval [as updateDirectives] (AppComponent.html:8)
        at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
        at checkAndUpdateView (core.es5.js:12236)
        at callViewAction (core.es5.js:12601)

最佳答案

三件事:

1)请像这样导入:

import * as particlesJS from 'particlesjs';

而不是

import * particlesJS from 'particlesjs';

2) 您是否安装了 keywordsJS 作为节点模块？如果没有，请先安装

npm i -save "particlejs".

并从你的html中删除particlejs的cdn引用。

3)不要使用json文件将配置导入到particleJS中，而应该直接使用js对象作为配置。要以正确的方式执行此操作 - 首先创建一个文件/assets/articlesjs-config.ts。在此文件中写入您的配置对象，与 keywordsjs-config.json 相同(也许只是复制它)。如果我假设你的 keywordsjs-config.json 是这样的:

{
"particles": {
    "number": {
      "value": 380,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

然后像这样创建您的 keywordsjs-config.ts 文件:

export const myFirstParticle = {
 "particles": {
    "number": {
      "value": 380,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

然后在您的“SlidePresentationComponent”文件中，只需像这样导入它:

import { myFirstParticle } from 'assets/particlesjs-config.ts'

并像这样与 keywordsJS 一起使用:

particlesJS.load('particles-js', myFirstParticle, function() {
  console.log('callback - particles.js config loaded');
});

关于javascript - 在 Angular 4 中加载articles.js 库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45391485/

25 4 0
文章推荐： ios - 状态栏下的 UIViewController 内容
文章推荐： python - 扩展 python tornado 应用程序的正确方法
文章推荐： ios - 检查一个词后面是否有一个词(NSSTRING)
文章推荐： python - 如何在 yapsy 插件中定义类别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com