如何在Angular 2中使用DataTable

Question

我想在我的Angular 2應用程序中使用DataTable。但是這不起作用。 Angular 2沒有可能在模板中添加腳本標籤。你知道我該怎麼做？我想我必須在systemJs上做一些改變。

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> 

我的組件：

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

在我的index.html我已經添加了必需的libaries：提前

<!-- 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> 

謝謝！

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

這個例子可以改進，但基本特點及其確定。