DataTable을 각도 2로 사용하는 방법

Question

내 Angular 2 앱에서 DataTable을 사용하고 싶습니다. 그러나 이것은 효과가 없습니다. 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> 

내 구성 요소 : 내 index.html을에서

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

내가 추가 한 필요한 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에 대한 지침을 만든 다음 해당 구성 요소에 대한 지침을 사용할 수 있습니다.

같은가 someting :

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

이 예를 개선 할 수 있지만, 기본 정보는 확인을 제공합니다.