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

问题描述

我有一个新的Ionic项目(空白"模板).我已经运行npm install gsap --save.

I have a fresh Ionic project ('blank' template). I have run 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
    });
  }

}

但是我的应用出现错误:

But my app is erroring with:

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

这是怎么回事，为什么会出现此错误?我已经尝试过 npm页面中的所有导入类型，并且每次都得到相同的结果时间.

What's going on here and why am I getting this error? I have tried all of the import types from the npm page and get the same result every time.

推荐答案

默认情况下，GSAP TweenMax不提供定义文件.

GSAP TweenMax doesn't provide definition files by default.

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/编辑/angular-tkmxb4?file=app%2Fapp.component.ts

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

对于Ionic:，请参阅 Ionic项目中的GSAP

这篇关于如何在Ionic/Angular项目中导入和使用GSAP?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！