如何将 jquery 和其他.js库与 Angular2 一起使用
How to use jquery and other .js libraries with Angular2
我不知道这个问题是否属于Angular2。但是我正在使用Angular2,并希望使用HTML,CSS和JS集成此处显示的演示 - (请检查其工作演示和动画内容)。此演示显示了引导程序的轮播,其中包含动画内部内容。
这是我在 Plunker 中使用 Angular2 的演示。我尝试集成它,一切正常,除了我看不到旋转木马内部内容的动画,如文章所示。
另外请指导如何将jQuery和其他JS库与Angular2一起使用?
索引.html
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Demo scripts -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Animate.css library -->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<script src="js/demo.js"></script>
演示.js
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
如何使用这个演示.js它包含 Angular2 应用程序中的 jQuery 代码?
你必须在 angular2 组件初始化后运行你的 jQuery 代码。我稍微改变了你的app.component.ts
:
import {Component,OnInit} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
declare var RunAnim;
declare var jQuery;
@Component({
selector: 'my-app',
templateUrl: 'mytemplate.html'
})
export class AppComponent implements OnInit {
constructor(){
}
ngOnInit(){
RunAnim(jQuery);
}
ngAfterContentInit() {
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
RunAnim
和jQuery
声明是为了在 TS 中可见,它们在全球范围内可用。
而你的jQuery代码我做了一个命名函数RunAnim
:
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(window.RunAnim=function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
});
相关文章:
- 如何将js库与typescript一起使用
- 是否可以将Windows VisualSVN存储库与MAC客户端一起使用
- 使用回旋镖库与资源定时API的优势
- Node.js断言库与其他断言库的比较
- 如何将 jquery 和其他.js库与 Angular2 一起使用
- 不能将 Ruby 数学库与 Opal 一起使用
- Javascript和Javascript库与Razor和MVC一起使用
- Jquery 库与另一个 jQuery 库冲突
- Angular2 模板与翡翠的网址
- CDN托管的JavaScript库与下载和缩小
- 将 Google Map JavaScript 库与 cordova 一起使用
- Angular2 Selector与bundle和ECM6的任何元素都不匹配
- Ruby非阻塞库与Node
- 基于旋转木马的图像库与缩略图&标题
- 如何使JavaScript库与多个promise库兼容
- 将过时的JavaScript库与更新的TypeScript集成
- Javascript幻灯片显示库与侧栏,
- 库与谷歌图表进行交互
- ITHIT WebDAV Ajax库与匿名身份验证
- Webpack捆绑库与Node.js源文件中的库不同