在 Angular 2 (angular-cli) 中使用 vanilla js 代码 [英] Using vanilla js code in Angular 2 (angular-cli)

问题描述

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

I am trying to implement the Vanilla Tilt JS plugin in my project, but I can't even seem to find a way of using vanilla js imports in my project.

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

So far, I have tried using it as a directive, just like you would use a jQuery plugin by using ElementRef , Input etc. from @angular/core.

我已经将脚本直接从 npm 包，我已为 Vanilla Tilt JS 安装.

I have included the script in my .angular-cli.json file under scripts: directly from the npm package that I have installed for Vanilla Tilt JS.

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

And I was thinking about using it as a directive, since it has its own data-tilt attribute like so:

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

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

    }
}

但是，尽管到目前为止我已经付出了很多努力，但我还是找不到办法做到这一点.我是 Angular 2 的新手.

But I can't find a way to do this, despite my efforts so far. I am new to Angular 2.

我的问题是:

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

推荐答案

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

You should be able to import Vinilla-tilt and use the element reference passed into the constructor.

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 代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！