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

我不知道这个问题是否属于Angular2。但我使用的是Angular2，我想使用HTML、CSS和JS进行集成。这个演示展示了bootstrap的带动画内部内容的旋转木马

。我试着将它集成起来，一切都很好，只是我看不到文章中所示的转盘内部内容的动画

另外，请指导如何在Angular2中使用jQuery和其他JS库

index.html

---

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

初始化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);
    });  

});

---

不，不是那样的。我遵循了这篇文章的说法。一切都很好。但问题是我看不到文章中显示的动画内部内容。所以我想不出来。Angular2有什么需要做的吗？或者只是缺少了一些我无法理解的东西。没有Angular2，它工作正常，没有任何问题。我有一个anuglar2应用程序，希望实现。就这样。但它不起作用。如果你读过我的问题。我已经清楚地提到，我不知道它是否属于angular2。但问题是我想在angular2应用程序中使用它。在angular2应用程序中，它不起作用。我提供了plunker或我的作品。你可以查一下。一切正常。只有我想有旋转木马，这是不工作的动画内容。对于该文章，使用

animation.css

文件和

demo.js（jquerycode）

。但它就是不起作用。请帮助。抱歉，没有看到这是一个Plunker链接。问题应该直接包含相关部分，而不仅仅是链接到其他网站。但是在没有错误的情况下，我如何提供部分。只有动画不起作用。而且

demo.js

包含

jquery部分

，所以我认为应该存在一些问题。但不确定。令我惊讶的是，这居然奏效了！非常感谢。

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

/* 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);
    });  

});