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

我的组件如下所示：

 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脚本加载到我的My main index.html，并且加载良好。我只需要导入timelinemax，以便在我的组件类中使用它。找不到这方面的任何示例。

如果库开发人员未提供timelinemax.d.ts定义文件，则您需要创建/编写该文件

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

import {TL} from './TimelineMax';

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

root
  +opencmp.ts
  +timelinemax.ts

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

例如，如果节点_模块的组织方式如下：

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

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

（您应该使用包管理器（如npm:

npm install gsap

）导入它）

然后按如下方式导入模块：

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

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

---

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

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

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.min.js重命名为TimelineMax.js，但现在我得到了这个错误：get 404（未找到），并且我没有在任何地方声明/node_modules/TweenLite.js，但无论如何，我认为我使用该.ts文件走错了方向，我在这里有点迷路了，请尝试：从“gsap/src/uncompressed/TimelineMax”导入{TL}；我搜索了timeline max，发现它是一个外部模块，我用npm导入了它，找到了它的位置。我已经安装了该软件包，但导入时遇到问题。我尝试了“从'gsap/src/uncompressed/timelinemax'导入{TL}”，但它不起作用（app\components\opting\opting.ts（5,18）：错误TS2307：找不到模块'gsap/src/uncompressed/timelinemax'），但也不包括任何.ts文件如果您使用的是VS 2015，右键单击项目，转到properties和TypeScript build，将模块系统更改为CommonJS。我不知道你正在使用的模块加载器的详细信息。。。但我就是这么做的。不知道，我用这个：然后从那里开始工作。我试着找到一些像这样的ts文件，我用谷歌搜索了一下，到处乱动，但没有成功。但是对于我想导入angular2的其他js文件也是这样吗？看起来有点难，现在我看到您提供了这是类型定义，但没有定义模块，所以我将其更改为：（注意最后几行）。此外，我还将一些方法设置为静态的，仅用于此示例。在我的代码中，我使用：

import*作为“TimelineMax”中的TL

现在我可以使用TL调用静态方法。。。或创建此类的实例。。。