Verwenden von TweenMax in Angular2-Projekt

Question

Wie kann ich TweenMax in meinem Angular2-Projekt einrichten? Anstatt das Skript in meinem HTML Hinzufügen möchte ich in der Lage sein, diese zu importieren TweenMax ähnlich:

import { TweenMax } from 'gsap'; 

HINWEIS: Ich bin mit Winkel-cli.

Answer 1

Hinzufügen dieses externe Paket zu eckigen 2 ist fast das gleiche wie jedes andere Paket da draußen. jquery, Firebase, Sie nennen es ..

Aber Sie sollten wissen, dass in diesem Moment gibt es keine Typisierungsdatei für das GSAP-Modul. So können Sie nicht die Importe auswählen, die Sie wünschen. Das bedeutet auch, keine intelisense in Typoskript :(Aber man kann es immer noch wie folgt verwenden:

Schritt 1: npm installieren

npm install gsap --save 

Schritt 2: Typoskript verhindern zu beschweren sich über nicht finden clases durch die folgende Zeile in typings.d.ts Datei hinzufügen:

declare var module: { id: string }; 

declare let TimelineMax: any; // declare it as any. 
// so no error complains, Typescript compiler is happy now:) 

Sobald die Typisierungen Datei für diesen Modul Schritt 4 erstellt wird, wird zu:

typings install gsap --save. After that make sure you have included: /// <reference path="../typings/path to your gsap typings" /> 

Schritt 3: es in Ihrer Komponente verwenden - zum Beispiel in app.component.ts:

import 'gsap' // this is required for TimelineMax() to work 
// decorator stuff here. 
export class AppComponent implements OnInit{ 

    ngOnInit(){ 

    let targetObject = document.getElementByTagName('h1'); 

    let tl = TimelineMax(); // this is free of errors now 

    tl.from(targetObject, 1, { x:400 }); 
    tl.play(); 
    } 
} 

Schritt 4: in diesem Setup, gibt es keine Notwendigkeit, etwas zu dem Haupt hinzuzufügen. ts (Bootstrap-Datei) so viel Spaß!

Answer 2

Es ist ein einfacher Weg, nur

npm install --save-dev gsap 
npm install --save-dev @types/gsap 

in Ihrer ts-Datei importieren GSAP

import {TweenLite} from "gsap"; 

und in Ihrer Methode oder auf ngOnInit Sie

let photo = document.getElementById("photo"); 
TweenLite.to(photo, 2, {width:"200px", height:"550px"}); 

schreiben kann, wenn Sie haben ein Div mit und ID des Fotos

Answer 3

Neben Hinzufügen von Typdefinition für GSAP, versuchen:

• es außerhalb Angular Zone
• zuweisen eine Instanz mit this

wie so läuft:

import { NgZone } from '@angular/core'; 
import {TweenMax} from "gsap"; 

myTween: any; 

constructor(private ngZone: NgZone){} 

ngOnInit() { 

    this.ngZone.runOutsideAngular(() => 
     { 
     this.tween = TweenMax; 
     this.tween.to(some params); // do your stuff 
     } 
    ); 
} 

Hinweis: Getestet auf Angular 5.2.4/Cli: 1.6.8/Maschinenschrift: 2.53