Question

您好，我想在我的一个角度组件中使用一个名为vanilla-tilt.js的第三方js库。这是库的链接：

https://micku7zu.github.io/vanilla-tilt.js/

到目前为止，我所做的是：与npm一起安装并将其链接到我的angular.json文件中，如下所示：

"scripts": [
    "node_modules/vanilla-tilt/dist/vanilla-tilt.js"
]

然后在我的component.ts中执行以下操作（仅提供必要的代码，而'.about-pic'是我在html文件中选择的<img>）：

import { VanillaTilt } from 'vanilla-tilt/dist/vanilla-tilt.js';

export class AboutComponent implements OnInit, AfterViewInit {
  ngAfterViewInit() {
    VanillaTilt.init(document.querySelector('.about-pic'), {
      max: 25,
      speed: 400
    });
  }
}

我从上面链接的网站的ngAfterViewInit()中的“ JS Way”下获得了代码

我以为我正确导入了该外部库，但是在控制台中出现以下错误：

ERROR TypeError: Cannot read property 'init' of undefined

我想我不太了解在有角度的组件中安装第三方js库的概念。

有人可以帮忙吗？

谢谢！

Answer 1

按照https://micku7zu.github.io/vanilla-tilt.js/ JS的方式，我在ngOnInit中尝试了相同的方法。它对我有用。

npm安装香草倾斜
在ts文件中声明var VanillaTilt
ngOnInit（）{

VanillaTilt.init（document.querySelector（“。tilt-image”），{ 最多：25，速度：400 }）;

VanillaTilt.init（document.querySelectorAll（“。tilt-image”））;

}
在html中
div class =“倾斜倾斜图像” data-tilt data-tilt-glare =“ true” data-tilt-scale =“ 1.1”
img src =“ assets / images / sample.png”
/ div

注意：“倾斜图像”是您的元素

将vanilla-tilt.js添加到angular 6组件（angular组件中的外部js库）

1 个答案: