typescript - 在 Angular2 项目中使用 TweenMax

Question

如何在我的 Angular2 项目中设置 TweenMax。我希望能够导入类似于以下内容的 TweenMax，而不是在我的 HTML 中添加脚本：

import { TweenMax } from 'gsap';

注意：我正在使用 angular-cli。

Answer 1

有一种更简单的方法

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

在您的 ts 文件中，导入 gsap

import {TweenLite} from "gsap";

在你的方法或 ngOnInit 上你可以写

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

如果你有一个带有照片 ID 的 div

Answer 2

将此外部包添加到 angular 2 几乎与任何其他包相同。jquery，firebase，你的名字..

但是您应该知道，此时 gsap 模块没有类型文件。所以你不能随心所欲地挑选进口。这也意味着 typescript 中没有智能感知 :( 但你仍然可以像这样使用它：

第 1 步： npm 安装它

npm install gsap --save

第 2 步：typings.d.ts通过在文件中添加以下行来防止打字稿抱怨找不到分类：

declare var module: { id: string };

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

为该模块创建类型文件后，第 4 步变为：

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

第 3 步：在您的组件中使用它 - 例如在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();
  }
}

第 4 步：在此设置中，无需向 main.ts（引导文件）添加任何内容，尽情享受吧！

Answer 3

除了为 gsap 添加类型定义之外，请尝试：

• 在 Angular Zone 之外运行它
• 分配一个实例this

像这样：

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
      }
    );
}

注意：在 Angular 5.2.4 / Cli：1.6.8 / typescript：2.53 上测试