我想在我的 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 中,我添加了所需的库:
<!-- 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>
提前致谢!
最佳答案
您可以为 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)
});
}
}
此示例可以改进,但对于基本功能来说还可以。
关于javascript - 如何在 Angular 2 中使用数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38456218/