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，这样我就可以在我的组件类中使用它。无法找到任何相关的例子。

Answer 1

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

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 2

我通过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中运行良好

Answer 3

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

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

3 个答案: