Использование Parallax.js в Angular throws error «Невозможно прочитать свойство 'getAttribute' of null" - PullRequest
Новая
       11

Использование Parallax.js в Angular throws error «Невозможно прочитать свойство 'getAttribute' of null"

2 голосов
/ 07 июля 2019

Я использую 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>

1 Ответ

2 голосов
/ 07 июля 2019

Возможно, что-то происходит в неправильном порядке из-за асинхронной природы JS, так как я могу запустить его в этом примере (он не работает на стеке из-за проблем с зависимостями, но запускает его локально на ваш комп работает).

Сначала из вашего примера html удалите узлы, кроме корневого узла, и добавьте в него свой компонент параллакса следующим образом:

index.html: 

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

app.html: 

<parallax></parallax>

Поскольку вы используете его в компоненте, в вашем ng-приложении вы должны запустить библиотеку в реальном компоненте, вставив ее в комплект приложения, как это делается в вашем angular.json: 

"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
    });

  }

}
...