将 vanilla-tilt.js 添加到 Angular 6 组件中（在 Angular 组件中使用外部的 JS 库）

Question

我希望在我的Angular组件中使用一个名为vanilla-tilt.js的第三方js库。以下是该库的链接：https://micku7zu.github.io/vanilla-tilt.js/。目前我已经通过npm安装了该库，并将其链接到我的angular.json文件中，如下所示：

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

然后在我的组件.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
    });
  }
}

我从上面链接的网站中，在“JS Way”下找到了ngAfterViewInit()的代码。

我认为我已经正确地导入了这个外部库，但是在控制台中出现了以下错误：

ERROR TypeError: Cannot read property 'init' of undefined

我想我还没有完全理解在Angular组件中安装第三方JS库的概念。接下来我该尝试什么？

- cup_of

---

请查看这个和这个。 - Vikas

Answer 1

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

1. npm install vanilla-tilt
2. 在ts文件中声明VanillaTilt变量

3. ngOnInit() {

   VanillaTilt.init(document.querySelector(".tilt-image"), { max: 25, speed: 400 });

   VanillaTilt.init(document.querySelectorAll(".tilt-image"));

   }

4. 在html中
   div class="tilt tilt-image" data-tilt data-tilt-glare="true" data-tilt-scale="1.1"
   img src="assets/images/sample.png"
   /div

注意："tilt-image"是你的元素

- Vignesh AG

---

声明并初始化固定项。 顺便提一下，在Angular中，当您将vanilla-tilt html从索引/主页面移动到组件时，它们不起作用。解决方案是按照上述方法初始化相关元素。谢谢。 - Dash

如果您想在Angular 9+中运行此代码，您需要先导入vanilla-tilt库：import 'vanilla-tilt'; declare var VanillaTilt;这样就可以正常工作了。 - hatirlatici

Answer 2

曾在 Angular 14 上工作：

安装包：

npm install vanilla-tilt

然后在你的组件中导入ElementRef（获取DOM元素）和VanillaTilt（添加效果）包：

import {Component, ElementRef} from '@angular/core';
import VanillaTilt from "vanilla-tilt";

在构造函数中添加ElementRef：

constructor(private el: ElementRef) {
}

在ngOnInit方法中，告诉Angular将效果放置在哪里（需要指定CSS类名）：

ngOnInit() {
// add vanilla-tilt effect on .<class-name> cards
VanillaTilt.init(
  this.el.nativeElement.querySelectorAll(".class-name"), { max: 20, speed: 300, scale: 1.05 }
);}

所有具有给定类名的元素将具有所需的效果^ _ ^

要修改效果，您可以更改.init()方法的第二个参数中的参数。此处提供可用参数：https://www.npmjs.com/package/vanilla-tilt#options

玩得开心！

- Kirill

Answer 3

我刚刚发布了https://www.npmjs.com/package/@geometricpanda/angular-tilt

这个包支持原始jQuery包的所有功能，我将使用vanilla tilt的新功能更新它。

这里的主要区别是@geometricpanda/angular-tilt不直接使用DOM api，而是利用Angular的Renderer2、@HostBindings和@HostListeners——这意味着它对于Angular通用渲染（或预渲染）是安全的，并且不会在DOM模拟环境中（如JSDOM（Jest））引起问题。

- Jim Drury