Использование кода vanilla js в Angular 2 (angular-cli)

Я пытаюсь реализовать плагин Vanilla Tilt JS в моем проекте, но я даже не могу найти способ использовать импорт vanilla js в моем проекте.

До сих пор я пробовал использовать его в качестве директивы, как если бы вы использовали плагин jQuery, используя ElementRef, Input и т. Д. Из @angular/core.

Я включил сценарий в свой .angular-cli.json файл в scripts: прямо из пакета npm, который я установил для Vanilla Tilt JS.

И я думал о том, чтобы использовать его как директиву, поскольку у него есть собственный атрибут data-tilt, например:

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

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

    }
}

Но я не могу найти способ сделать это, несмотря на все мои усилия. Я новичок в Angular 2.

У меня вопрос:

Можно ли использовать простой плагин javasciprt внутри Angular 2 и, если возможно, как реализовать плагин Vanilla-Tilt JS?


javascript angular angular2-directives angular2-modules
person Tanasos    schedule 01.03.2017    source источник
comment
Отметьте это stackoverflow.com/questions/35796961/   -  person Naga Harish M    schedule 01.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны иметь возможность импортировать 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
      });
    }
}
person Alex Jones    schedule 01.03.2017
comment
Единственное, чего здесь не хватает, - это el.nativeElement, который ссылается на DOM. - person Tanasos; 02.03.2017