gpt4 book ai didi

javascript - 在我的 Angular 2 项目中导入 javascript 文件

转载 作者:行者123 更新时间:2023-12-03 04:23:43 24 4
gpt4 key购买 nike

我正在 Angular Projet 中工作,我想在我的项目中添加两个 javascript 文件;所以我只需将这些 js 文件包含在我的 Assets 中,并在我的 Angular cli 脚本部分中调用它们。我可以看到这些文件被称为正确。

但我有这个问题: enter image description here

我的html代码是:

<div   class=" demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">ALTEN <span class="thin">GAV²</span></h1>
</div>
</div>
</div><!-- /container -->

我的js代码是:

(function() {

var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

// Main
initHeader();
initAnimation();
addListeners();

function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: width/2, y: height/2};
largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px';

canvas = document.getElementById('demo-canvas');

canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');

// create points
points = [];
for(var x = 0; x < width; x = x + width/20) {
for(var y = 0; y < height; y = y + height/20) {
var px = x + Math.random()*width/20;
var py = y + Math.random()*height/20;
var p = {x: px, originX: px, y: py, originY: py };
points.push(p);
}
}

// for each point find the 5 closest points
for(var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for(var j = 0; j < points.length; j++) {
var p2 = points[j]
if(!(p1 == p2)) {
var placed = false;
for(var k = 0; k < 5; k++) {
if(!placed) {
if(closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}

for(var k = 0; k < 5; k++) {
if(!placed) {
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}

// assign a circle to each point
for(var i in points) {
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
points[i].circle = c;
}
}

// Event handling
function addListeners() {
if(!('ontouchstart' in window)) {
window.addEventListener('mousemove', mouseMove);
}
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}

function mouseMove(e) {
var posx = posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}

function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}

function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}

// animation
function initAnimation() {
animate();
for(var i in points) {
shiftPoint(points[i]);
}
}

function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in points) {
// detect points in range
if(Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.3;
points[i].circle.active = 0.6;
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.1;
points[i].circle.active = 0.3;
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.02;
points[i].circle.active = 0.1;
} else {
points[i].active = 0;
points[i].circle.active = 0;
}

drawLines(points[i]);
points[i].circle.draw();
}
}
requestAnimationFrame(animate);
}

function shiftPoint(p) {
TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
onComplete: function() {
shiftPoint(p);
}});
}

// Canvas manipulation
function drawLines(p) {
if(!p.active) return;
for(var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
ctx.stroke();
}
}

function Circle(pos,rad,color) {
var _this = this;

// constructor
(function() {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();

this.draw = function() {
if(!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
ctx.fill();
};
}

// Util
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}

})();

当我尝试在我的 js 中记录 largeHeader 变量时,它返回 null 。这段代码工作正常。但将其包含在 Angular cli 中会产生问题。这是 webpack 的问题吗?预先感谢您

最佳答案

重要的是要说明您正在使用什么构建工具。如果它是基于 Webpack 的(即 Angular CLI),那么您可以使用以下之一引用 JavaScript 文件(或任何其他类型):

import * as test from './test.js';
// or
require('./test.js');

但是,您的错误消息表明您的 JavaScript 正在运行,但在这些行上失败了:

largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px';

它在您的页面上找不到 ID 为 large-header 的元素,因此对 .style 的调用失败。我怀疑,因为您是从顶级 HTML 页面导入文件,所以 JavaScript 代码在模板有机会呈现之前运行,因此此时不会创建 large-header 元素.

要进一步诊断,您可以使用 Chrome 开发工具的“源”选项卡在相关行上设置断点,然后检查“元素”选项卡以查看预期的 div 是否实际存在于至此。

我不确定你到底想在这里实现什么,但是添加不属于“Angular 世界”的任意 JavaScript 代码可能不是处理 Angular 应用程序的最佳方法。从长远来看,也许将此代码重构为组件或指令会更好。

关于javascript - 在我的 Angular 2 项目中导入 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43827214/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com