文章/答案/技术大牛

发布

社区首页 >问答首页 >在角抛错误中使用Parallax.js“无法读取空属性'getAttribute‘”

问在角抛错误中使用Parallax.js“无法读取空属性'getAttribute‘”
EN

Stack Overflow用户

提问于 2019-07-07 13:34:33

回答 1查看 945关注 0票数 2

我使用parallax.js (https://github.com/wagerfield/parallax)作为鼠标视差效应。我通过cdn和script标记将脚本添加到我的角应用程序中。在控制台中，它显示了以下错误：

 Uncaught TypeError: Cannot read property 'getAttribute' of null
    at Object.data (parallax.js:23)
    at new t (parallax.js:161)
    at (index):36

我试图通过npm安装这个库，并将它导入ts文件中，但没有成功。

这是我的index.html：

<body>
  <app-root></app-root>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
  <script type="text/javascript">
  var parallaxInstance = new Parallax(document.getElementById('scene'));
  </script>
</body>

我使用它的组件：

 <ul class="background-video" id="scene">

  <li class="layer" data-depth="0.7"><img src="/assets/parallax/ebene1.png" alt="" srcset=""></li>
  <li class="layer" data-depth="0.5"><img src="/assets/parallax/ebene2.png" alt="" srcset=""></li>
  <li class="layer" data-depth="0.3"><img src="/assets/parallax/ebene3.png" alt="" srcset=""></li>

 </ul>

angular

parallax.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-07 16:02:30

由于JS异步特性，可能会发生一些错误的事情，因为我能够让它在这个示例中运行(由于依赖问题，它不是在stackblitz上工作，而是在您的comp工作上本地运行)。

首先，从html示例中删除除根节点以外的节点，并在其中添加视差组件，如下所示：

index.html:

 <body>
      <app-root></app-root>
 </body>

app.html:

<parallax></parallax>

由于您在组件中使用它，所以在ng-app中，您应该像在angular.json中那样将它注入到应用程序包中，从而在实际组件中插入lib：

"options": {
    "scripts": [
                  "./node_modules/parallax-js/dist/parallax.min.js"
               ]
}

并在.ts文件中导入/输入它，如下所示：

import Parallax from 'parallax-js'
import { Component,AfterContentInit } from '@angular/core';

export class ParallaxComponent implements AfterContentInit {

  constructor() { }

  ngAfterContentInit() {

    const scene = document.getElementById('scene');
    const parallaxInstance = new Parallax(scene, {
      relativeInput: true
    });

  }

}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56922629

复制

相似问题

问在角抛错误中使用Parallax.js“无法读取空属性'getAttribute‘”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在角抛错误中使用Parallax.js“无法读取空属性'getAttribute‘”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在角抛错误中使用Parallax.js“无法读取空属性'getAttribute‘”
EN