Question

我想运行一些会增加div宽度的JavaScript。使用时

document.getElementId("bouncyBox")

在index.html根文件中，它返回null，因为先运行index.html（应用程序根），然后运行组件（home组件）。我正在尝试查看是否可以检测到哪个组件渲染，因此我可以为具有bouncyBox的div的特定组件运行一些javascript。我用过

ng new public

构建文件结构/项目。我用来构建组件的内容-

ng genereate component component_name

-它会创建四个文件（css，html，spect.ts，ts）

一旦获得html元素，这就是我的意图。

<div class = "homeCom">
   <p>Home Component</p>
   <div id = "bouncyBox">
      <p>bouncyBox the </p>
   </div>
</div>
<script type="text/javascript">
   console.log("helleo chinck")
   var myBox = document.getElementById("bouncyBox");
   console.log("Hererere, ", myBox)
   if (document.getElementById("bouncyBox")){
   console.log("hjelo");
   var w = 20;
   var h = 20;
   var mutateDiv = setInterval(function () {
      if(w>500) clearInterval(mutateDiv)
      w = w + 5;
      h = h + 5;
      document.getElementById("bouncyBox").style.width = w + 'px';
      document.getElementById("bouncyBox").style.height = h + 'px';
   }, 1000);

}
</script>

如前所述，由于先运行index.html，然后运行组件，所以document.getElementBy（“ bouncyBox”）将返回null。我尝试运行的javascript位于index.html中。我试图将js放置在组件的html文件中，但未被读取。任何帮助表示赞赏。

这是index.html的外观

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Public</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
   <div class = "wrapper">
      <app-root></app-root>
   </div>
</body>
</html>

这是app.component.html，位于应用程序根目录中

<div class = "upperBar">
   <ul>
       <li><a [routerLink]="['/']">Home</a></li>
       <li><a [routerLink]="['/Portfolio']">Portfolio</a></li>
       <li><a [routerLink]="['/About']">About</a></li>
   </ul>
</div>
<router-outlet></router-outlet>
<div class = "contact">
    <h2>Email and Sockit.IO</h2>
</div>
<div class = "lowerbar">
   <ul>
       <li><a href="/">GitHub</a></li>
       <li><a href="/">Linkedin</a></li>
   </ul>
</div>

在Angular.js中完全渲染组件后如何正确运行Javacript

0 个答案: