DataTableをAngular 2で使用する方法

Question

私のAngular 2アプリでDataTableを使用したいと思います。しかし、これは動作していません。テンプレート2にスクリプトタグを追加するには、Angular 2に可能性はありません。私はこれをどうやってできるのか知っていますか？私はシステムのいくつかの変更を行う必要があると思います。

するlist.html：

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
       <tr> 
       <td>Gavin Cortez</td> 
       <td>Team Leader</td> 
       <td>San Francisco</td> 
       <td>22</td> 
       <td>2008/10/26</td> 
       <td>$235,500</td> 
      </tr> 
      <tr> 
       <td>Martena Mccray</td> 
       <td>Post-Sales support</td> 
       <td>Edinburgh</td> 
       <td>46</td> 
       <td>2011/03/09</td> 
       <td>$324,050</td> 
      </tr> 
     </tbody> 
    </table> 

私のコンポーネント：事前に

<!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/jquery.dataTables.min.css" rel="stylesheet"> 
<!-- jQuery --> 
    <script src="js/jquery.js"></script> 
    <script src="js/jquery.dataTables.min.js"></script> 
    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

ありがとう：私のindex.htmlで

... 
declare var jQuery:any; 
.. 
ngOnInit():any{ 
     console.log("Augerufen"); 
     jQuery('#example').DataTable(); 
    } 
... 

私は必要するライブラリが追加されました！

Answer 1

DataTableのディレクティブを作成し、そのディレクティブをコンポーネントで使用することができます。

ようないろいろ書い：

import {Directive, ElementRef} from '@angular/core'; 
import {Input, OnInit}   from '@angular/core'; 


import { JqueryDataTableEvent } from './jquery-datable-event'; 
import 'jquery.dataTables'; 

declare var jQuery:any; 

@Directive({ 
    selector: '[jqueryDatatable]' 
}) 

export class JqueryDatatableDirective implements OnInit { 
    private _datatable : any; 

    @Input() 
    jqueryDatatable: any; 

    @Input() 
    dataTableEvents: JqueryDataTableEvent[]; 

    constructor(private _element: ElementRef) {} 

    ngOnInit() { 
     this.applyOptions(); 
     this.applyEvents(); 
    } 

    applyOptions() 
    { 
     if (!this.jqueryDatatable) 
      console.error("Empty options array was passed to initialize jqueryDatatable."); 

     this._datatable = jQuery(this._element.nativeElement).DataTable(this.jqueryDatatable || {}); 

    } 

    applyEvents() { 
     this.dataTableEvents.map((event)=> { 
      this._datatable.on(event.eventName, event.selector, event.callback) 
     }); 
    } 
} 

この例を向上させることができますが、基本のためには、その[OK]を備えています。