在 Angular 中使用 Parallax.js 会引发错误 "Cannot read property 'getAttribute' of null"

Question

我正在使用 parallax.js (https://github.com/wagerfield/parallax) 来实现鼠标悬停视差效果。我通过 cdn 和脚本标签将脚本添加到我的 angular 应用程序。在控制台中显示此错误：

 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>

Answer 1

可能由于 JS 的异步性质，某些事情以错误的顺序发生，因为我能够在这个运行中得到它 example（由于依赖性问题，它在 stackblitz 上不起作用但是运行它在您的本地电脑上有效。

首先从您的 html 示例中删除除根节点之外的节点，然后像这样在其中添加视差组件：

index.html:

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

app.html:

<parallax></parallax>

既然你在一个组件中使用它，在你的 ng-app 你应该通过将它注入应用程序包来初始化实际组件中的库，就像在你的 angular.json:

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

和 importing/initing 它在您的 .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
    });

  }

}

在 Angular 中使用 Parallax.js 会引发错误 "Cannot read property 'getAttribute' of null"

Using Parallax.js in Angular throws error "Cannot read property 'getAttribute' of null"

parallax.js

angular