angular引入 jquery.wave.js

jquery.wave.js需要jquery和tweenMax的支持，首先 我们要引入jquery

angular引入jquery基本来说有二种方式

第一种

直接在index中引入jquery的cdn
index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

在组件中声明一下就可以用了

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'abgular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

第二种

这里有篇图文解释的很不错咯
npm安装

npm install jquery --save
npm install --save-dev @types/jquery

.angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

使用的时候在ts文件中写入

declare var jquery:any;   // not required
declare var $ :any;   // not required

或者

import * as $ from 'jquery';

回到正题，现在我们需要应用第三方插件jquery.wave.js，将源码直接粘贴到assets/js/jquery.wave.js就可以了，但是由于里面还用到了tweenMax，我们就必须将tweenMax写到angular-cli.json中了，而不能通过import的形式导入。

"scripts": ["../node_modules/jquery/dist/jquery.min.js","../node_modules/_gsap@1.20.4@gsap/src/minified/TweenMax.min.js","assets/js/wave.js"],

这样就可以正常使用了