Javascript Angular2和jQuery数据表

我已经将Angular 2添加到一个主要使用jQuery+插件构建的旧应用程序中。我试图在组件内部使用jQuery。我可以把它放在桌子上。问题是我有一个单元格模板，它有NG2事件监听器。在Angular 1中，我可以使用$compile服务将它们注册到作用域中，但这已经消失了。以下是在代码中创建DataTable的方式，包括单元格模板：

$('#myTable').DataTable({
        data: data,
        columns: [
            {
                data: 'Dimension'
                , render: function (data: any, type: any, obj: any, tbl: any) {
                    //return data;
                    var template =
                        `<div class="container-fluid">
                        <div class="row text-left" style="">
                            <div>
                                <div class="col-md-12">
                                    <i class="glyphicon glyphicon-plus" (click)="showChildren()"></i>&nbsp;
                                    ${obj.Name}
                                    &nbsp;&nbsp;<i class="glyphicon glyphicon-plus-sign" (click)="addNew()"></i>
                                </div>
                            </div>
                        </div>
                    </div>`;

                    return template;
                }
            }
        ]
    });
});

$（'#myTable'）。数据表({
数据：数据，
栏目：[
{
数据：“维度”
，render:function（数据：任意，类型：任意，对象：任意，tbl:任意）{
//返回数据；
变量模板=
`
${obj.Name}
`;
返回模板；
}
}
]
});
});

---

（单击）事件侦听器只是被呈现为html，不做任何事情。如何让它们工作？

您可以先将数据绑定项呈现为隐藏数据块，然后通过jQuery将它们与palceholder模板匹配，如下所示：

HTML:

{{obj.Name}

Javascript:

// Initialize jQuery Data Table
$('#myTable').DataTable({
    data: data,
    columns: [{
        data: 'Dimension', 
        render: function (data: any, type: any, obj: any, tbl: any) {
                return `<div id="divTemplate${obj.Name}"></div>`;
            }
        }
    ]
});

// Transfer each DOM data block to the data table templates
$('.source-data[data-name]').each(function () {
    var id = $(this).attr('data-name');
    var html = $(this).attr('data-name').html();
    $('#divTemplate' + id).html(html);
});

//初始化jQuery数据表
$（'#myTable'）。数据表({
数据：数据，
栏目：[{
数据：“维度”，
呈现：函数（数据：任意、类型：任意、对象：任意、tbl:任意）{
返回``；
}
}
]
});
//将每个DOM数据块传输到数据表模板
$（'.source data[data name]'）。每个（函数（）{
var id=$（this.attr（'data-name'）；
var html=$（this.attr（'data-name'）.html（）；
$（'#divTemplate'+id）.html（html）；
});

虽然这可以将html移动到DataTable中，但事件在DataTable中不起作用。请尝试使用$（this）.attr（'data-name'）.children（）.detach（）.appendTo（$（'#divTemplate'+id）），而不是以var html=$（this.attr…）开头的最后一行；

// Initialize jQuery Data Table
$('#myTable').DataTable({
    data: data,
    columns: [{
        data: 'Dimension', 
        render: function (data: any, type: any, obj: any, tbl: any) {
                return `<div id="divTemplate${obj.Name}"></div>`;
            }
        }
    ]
});

// Transfer each DOM data block to the data table templates
$('.source-data[data-name]').each(function () {
    var id = $(this).attr('data-name');
    var html = $(this).attr('data-name').html();
    $('#divTemplate' + id).html(html);
});