在 Angular 2 (angular-cli) 中使用 vanilla js 代码

Question

我正在尝试在我的项目中实现 Vanilla Tilt JS plugin，但我什至找不到在我的项目中使用 vanilla js 导入的方法。

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

我直接从我为 Vanilla Tilt JS 安装的 npm package 将脚本包含在 scripts: 下的 .angular-cli.json 文件中.

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

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

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

    }
}

但我无法找到一种方法来做到这一点，尽管我已经做出了很多努力。我是 Angular 2.

的新手

我的问题是：

是否可以在 Angular2 中使用普通的 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 (angular-cli) 中使用 vanilla js 代码

Using vanilla js code in Angular 2 (angular-cli)

javascript

angular2-directives

angular2-modules

angular