如何将 TimeLineMax 导入我的 angular2 组件？

Question

我的组件如下所示：

 import {Component} from 'angular2/core';
//import {TL} from 'angular2/TimelineMax';
@Component({
    selector: 'opning',
    templateUrl: './components/opning/opning.html',
    styleUrls: ['./components/opning/opning.css']
})
export class OpenCmp {
    constructor() {
        console.log("played");

        var tl = new TimelineMax();
        var logo = $("#logo");
        tl.from(logo, 4, { z: 500, y: 74, visibility: "visible" });
        //tl.from(logo, 2, { left: "632px" });
        tl.play();

    }
}

我的 TimeLineMax.min.js 通过 .ts 脚本加载我的主要 index.html 并且加载正常。我只需要导入 timelinemax，这样我就可以在我的组件中使用它 class。找不到这方面的任何例子。

Answer 1

您需要 timelinemax.d.ts 定义文件，如果它们不是由库开发人员提供的，那么您需要创建/编写它。

Answer 2

导入自己的内部模块时，应使用相对路径，从托管模块所在的文件夹开始：

import {TL} from './TimelineMax';

这假设 opencmp.ts 与 timelinemax.ts 在同一文件夹中：

root
  +opencmp.ts
  +timelinemax.ts

如果timelinemax来自外部模块，则在./node_modules文件夹中找到该模块，并使用ts文件的相对路径。

例如，如果您的 node_modules 是这样组织的：

root
   +node_modules
       +angular2
       +gsap
           +src
               +uncompressed
                    +timelinemax.ts

（您应该使用像 npm 这样的包管理器导入它：npm install gsap）。

然后像这样导入模块：

 import {TL} from 'gsap/src/uncompressed/timelinemax';

Answer 3

我通过 greensocks 论坛找到了解决方案。

我在主 index.html 中包含了 TimelineMax.min.js 和 TweenLite.min.js 不使用 systemjs 加载器，而是像正常一样加载，然后在我的组件中：

import {Component} from 'angular2/core';
import "gsap";
@Component({
    selector: 'opning',
    templateUrl: './components/opning/opning.html',
    styleUrls: ['./components/opning/opning.css']
})
export class OpenCmp {
    constructor() {
        var obj = $('#logo');
        var cl = $('#myTab');
        var tbc = $('#tbc');
        var tl = new TimelineMax({ delay: 0.1 });
        tl.from(obj, 0.4, { y: -200 });
        tl.from(cl, 0.3, { x: -1700 }, "=-0.4");
        tl.from(tbc, 0.5, { opacity: 0 });
        tl.play();
        console.log('played');
    }
}

现在 gsap 在 Angular2 中工作正常

如何将 TimeLineMax 导入我的 angular2 组件？

How to import TimeLineMax into my angular2 component?

gsap

angular