Question

我正在尝试在我的项目中实施 Vanilla Tilt JS plugin ，但我似乎无法找到在项目中使用vanilla js导入的方法。

到目前为止，我已尝试将其用作指令，就像您使用ElementRef中的Input，@angular/core等来使用jQuery插件一样。

我已将该脚本直接从我为Vanilla Tilt JS安装的 npm package 下的.angular-cli.json下的scripts:文件中添加。

我正在考虑将它用作指令，因为它有自己的data-tilt属性，如下所示：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[data-tilt]'
})
export class ParallaxDirective {
    constructor(private el: ElementRef) {

    }
}

但是，尽管到目前为止我做出了努力，但我找不到办法做到这一点。我是Angular 2的新手。

我的问题是：

是否可以在Angular 2中使用普通的javasciprt插件，如果可能的话，我该如何实现Vanilla-Tilt JS插件？

Answer 1

您应该能够导入Vinilla-tilt并使用传递给构造函数的元素引用。

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

const VanillaTilt = require('vanilla-tilt');

@Directive({
    selector: '[data-tilt]'
})
export class ParallaxDirective {
    constructor(private el: ElementRef) {
      VanillaTilt.init(el.nativeElement, {
        max: 25,
        speed: 400
      });
    }
}

在Angular 2中使用vanilla js代码（angular-cli）

1 个答案: