在我的角2項目導入JavaScript文件

Question

我在角項目中工作，我想在我的項目中添加兩個JavaScript文件;所以我只是將這些js文件包含在我的資產中，並在我的角度cli腳本部分中調用它們。我可以看到，這些文件被稱爲correcty

，但我有這樣的問題：

我的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。 此代碼正常工作。但在角度cli中包括它會產生問題。 是webpack的問題嗎？ 感謝您提前

Answer 1

重要的是要說出你正在使用的構建工具。如果它的WebPack基礎（即角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應用程序的最佳方式。從長遠來看，也許將此代碼重構爲Component或Directive更好。