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"],
这样就可以正常使用了