javascript - Angular2 和 jQuery 数据表

Question

我已经将 Angular 2 添加到一个主要使用 jQuery + 插件构建的旧应用程序中。我正在尝试使用 jQuery DataTables在组件内部。我可以让它很好地加载表格。问题是我有一个包含 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;
                }
            }
        ]
    });
});

(click) 事件监听器只是呈现为 html，什么都不做。我如何让它们工作？

Answer 1

您可以先将数据绑定(bind)项呈现为隐藏数据 block ，然后通过 jQuery 将它们与占位符模板匹配，如下所示:

HTML:

<div class="container-fluid source-data" attr.data-name="{{obj.Name}}" 
    *ngFor="obj in objArray; trackBy: obj.Name" style="display: none;">
    <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>

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