角2コンポーネントにJQueryプラグインを追加する

Question

オンラインになったコンポーネントにjQueryコードのスニペットを追加しようとしています。 Specifically this.

私はすでにHTMLとCSSをコードに実装していますが、jQueryをロードする際に問題が発生しています。 HTML部分の末尾に<script>タグを使用しましたが、うまくいかないようです。何か案は？

Answer 1

ViewChildデコレータを使用してHTMLコンテンツの参照を取得し、その中のその参照をngAfterViewInitライフサイクルフック内のコンポーネントで使用することができます。参照はコンポーネント内で使用できますが、初期化の種類はjQueryを実行するには、ngAfterViewInitが適しています。

たとえば、HTMLテンプレートに次のコードがある場合。

<!-- my-component.html--> 

<section class="cd-hero"> 
    <ul class="cd-hero-slider"> 
     <li class="selected"> 
      <div class="cd-full-width"> 
       <h2><!-- title here --></h2> 
       <p><!-- description here --></p> 
       <a href="#0" class="cd-btn"><!-- btn text here --></a> 
      </div> <!-- .cd-full-width --> 
     </li> 

     <!-- othe slides here --> 

    </ul> <!-- .cd-hero-slider --> 

    <div class="cd-slider-nav" #cdSliderNav > 
     <nav> 
      <span class="cd-marker item-1"></span> 

      <ul> 
       <li class="selected"><a href="#0">Intro</a></li> 
       <li><a href="#0">Tech 1</a></li> 
       <!-- other navigation items here --> 
      </ul> 
     </nav> 
    </div> <!-- .cd-slider-nav --> 
</section> <!-- .cd-hero --> 

変数の参照は、次のように取得できます。あなたは、各コンポーネントに対して個別にそれを宣言file.Andあなたindex.htmlファイル内のjQueryのファイルが含まれていることを確認したくない場合は、あなたのタイピングは、ファイル内の

//myComponent.ts 

declare var jQuery: any 

@Component({ 
    selector:'my-component', 
    templateUrl:'my-component.html', 
    styleUrls:['my-component.css'] 
}) 
export class MyComponent implements AfterViewInit{ 
    @ViewChild('cdSliderNav') cdSliderNav:ElementRef; 

    ngAfterViewInit() { 
     jQuery(this.cdSliderNav.nativeElement).on('click', 
     event => { 
        //Handle click event here.. 
        console.log(event); 
       } 
    ) 
    } 
} 

あなたはまた、jQueryの変数を宣言することができます。

メインdivへの参照を取得したら、jQueryメソッドを使用して子を選択するか、jQueryを使用して必要な操作を実行できます。例えば、私のcdSliderNavの中にli要素を選択するには、find()メソッドを使用できます。

jQuery(this.cdSliderNav.nativeElement).find('li') 

これが役立ちます。