如何在Angular2中使用jquery和其他.js库

Question

我不知道这个问题是否属于Angular2。但我使用的是Angular2，并且想要使用HTML，CSS & JS集成this demo shown here - (please check its working demo and animated content)。这个演示显示了带有动画内部内容的引导程序的传送带。

This is my Demo in Plunker with Angular2。我试图整合它，一切正常，除非我看不到文章中显示的旋转木马内部动画。

另请指导​​如何使用jQuery和其他JS库与Angular2？

的index.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> 

demo.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); 

如何使用本demo.js包含Angular2应用程序内的jQuery代码？

Answer 1

你必须在angular2组件初始化后运行你的jQuery代码。我已经改变了你的app.component.ts一点：

的 RunAnim

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 
*/ 

声明和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); 
    }); 

});