Javascript 如何在Angular 2中使用DataTable

我想在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>

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

---

这个例子可以改进，但对于基本功能来说还可以。

什么不起作用？不清楚您要做什么，您提供的代码是演示代码，并且工作正常。还有，为什么要使用jquery来处理带有angular的更改事件？我想过滤表，使用dataTables，您可以轻松地完成这项工作。我把代码放在index.html中，它就可以工作了。但是如果我使用emeded test.html，它不会执行jQuery代码。我还尝试了window.alert（“test”）。此事件不起作用。无法在模板中添加脚本标记。Angular 2删除它您能提供完整的示例吗？@DarioN1这里有一个使用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)
        });
    }
}