如何在 Ionic/Angular 项目中导入和使用 GSAP？

Question

我有一个新的 Ionic 项目（'blank' 模板）。我有运行 npm install gsap --save.

这是我的 app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { TweenMax } from "gsap/all";

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    TweenMax,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

这是我的 home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TweenMax } from "gsap/all";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    public TweenMax: TweenMax
  ) {

  }

  ionViewDidLoad(){
    TweenMax.from(".logo", .5, { 
      opacity: 0,
      y: -72
    });
  }

}

但我的应用出现错误：

Runtime error: Can't resolve all parameters for TweenMax: (?, ?, ?).

这是怎么回事，为什么会出现此错误？我尝试了 npm page 中的所有导入类型，每次都得到相同的结果。

Answer 1

GSAP TweenMax 默认不提供定义文件。

npm install --save-dev @types/greensock

分量：

declare var TweenMax: any;

参考：https://medium.com/@mr.frag85/using-gsap-with-angular-6-project-it-works-on-prod-too-9ac036f21487

Stackblitz 样本：https://stackblitz.com/edit/angular-tkmxb4?file=app%2Fapp.component.ts

Ionic:请参考

如何在 Ionic/Angular 项目中导入和使用 GSAP？

How can I import and use GSAP in an Ionic/Angular project?

typescript

ionic-framework

gsap

angular