Angular2和jQuery數據表

Question

我已經將Angular 2添加到主要使用jQuery +插件構建的舊應用程序中。我試圖在組件內使用jQuery DataTables。我可以得到它來加載表就好了。問題是我有一個NG2事件監聽器的單元模板。在Angular 1中，我可以使用$ compile服務將它們註冊到範圍中，但這已消失。這是該數據表是如何在代碼中創建，其中包括電池模板：

$('#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; 
       } 
      } 
     ] 
    }); 
}); 

的（點擊）事件監聽一下就呈現爲HTML，什麼也不做。我如何讓他們工作？

Answer 1

你可以使第一綁定物品作爲隱藏的數據塊的數據，然後將它們匹配到palceholder模板通過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); 
});