Angular 2のルートページでどのようにjqueryプラグインを使用できますか？

Question

角度2のルートページでイメージスライダを使いたいと思います。私はフレックススライダとブートストラップカルーセルを接続しましたが、とにかくそれをやりませんでした。どうやってやるの？

マイルートページのコードが

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 
import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { ProviderMain } from '../provider/provider'; 
import { ActivatedRoute } from '@angular/router'; 
import * as $ from 'jquery'; 





@Component({ 
    selector: 'detail', 
    templateUrl: '/app/detail/detail.html', 
    providers: [ProviderMain], 


}) 

export class Detail 
{ 
    public link: any; 
    public mainData: any; 
    public bookingInformation: Array<any>; 
    public detail: Array<any>; 
    public information: any; 
    public itemImages: Array<any>; 

    private NextPhotoInterval: number = 5000; 
    //Looping or not 
    private noLoopSlides: boolean = true; 
    //Photos 
    constructor(public http: Http, public routePrm: ActivatedRoute, public provide: ProviderMain) 
    { 
     console.log("Detail Html Başladı"); 
     this.routePrm.params.subscribe(params => { 
      this.link = params["link"]; 
      this.getDetail(this.link); 
     }); 

    } 
    ngAfterViewInit() { 

    } 
    getDetail(link: any) { 
     this.provide.getServiceDetailInformation(link).then(data => { 
      this.bookingInformation = data.bookingInformation; 
      this.detail = data.detail; 
      this.information = data.information[0]; 
      this.itemImages = data.itemImages; 
     }); 
    } 



} 

であると私は正常に使用したプラグインが

$(document).ready(function() { 
     $('#carousel').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      slideshow: false, 
      itemWidth: 150, 
      itemMargin: 5, 
      asNavFor: '#slider' 
     }); 

     $('#slider').flexslider({ 
      animation: "slide", 
      controlNav: false, 
      animationLoop: false, 
      slideshow: false, 
      sync: "#carousel" 
     }); 
    }); 

work.Howできない富栄であれば、私のhtmlコードが

<div id="slider" class="flexslider"> 
        <ul class="slides"> 
         <li> 
          <img src="assets/images/holiday-slide3.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-slide4.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/slide15.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-slide3.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-slide4.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/slide15.jpg" alt="cruise"> 
         </li> 
        </ul> 
       </div> 
       <div id="carousel" class="flexslider"> 
        <ul class="slides"> 
         <li> 
          <img src="assets/images/holiday-thumb3.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-thumb4.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-thumb5.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-thumb3.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-thumb4.jpg" alt="cruise"> 
         </li> 
         <li> 
          <img src="assets/images/holiday-thumb5.jpg" alt="cruise"> 
         </li> 
        </ul> 
       </div> 

です私がする ？ ありがとうございます。

Answer 1

ヒア@リアムの警告と可能であればこれを避けてください。 flexslider要素への参照を追加し、テンプレートで...注意して

を使用します。

<div #slider id="slider" class="flexslider"> 
    <!-- ... --> 
</div> 
<div #carousel id="carousel" class="flexslider"> 
    <!-- ... --> 
</div> 

をあなたのコンポーネントでは、角度の外でのjQueryを実行するためにViewChildとNgZoneをインポートしたいと思います。テンプレートビューで要素への参照を作成します。その後、ngAfterViewInitメソッドでプラグインを実行します。

import { Component, NgZone, ViewChild } from '@angular/core'; 
import $ from "jquery"; 
//... 

@Component({ 
    selector: 'detail', 
    templateUrl: '/app/detail/detail.html', 
    providers: [ProviderMain] 
}) 
export class Detail { 
    @ViewChild('slider') slider; 
    @ViewChild('carousel') carousel; 

    $carousel: JQuery | any; 
    $slider: JQuery | any; 

    constructor(
     private zone: NgZone 
    ) {} 

    //... 

    ngAfterViewInit() { 
     this.zone.runOutsideAngular(() => { 
      this.$carousel = $(this.carousel.nativeElement).flexslider({ 
       animation: "slide", 
       controlNav: false, 
       animationLoop: false, 
       slideshow: false, 
       itemWidth: 150, 
       itemMargin: 5, 
       asNavFor: this.slider.nativeElement 
      }); 

      this.$slider = $(this.slider.nativeElement).flexslider({ 
       animation: "slide", 
       controlNav: false, 
       animationLoop: false, 
       slideshow: false, 
       sync: this.carousel.nativeElement 
      }); 
     } 
    } 

    //... 
} 

Check out this article on Hackernoon for reference