Angular2とjQuery DataTable

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

あなたはその後、以下のように、jQueryの経由palceholderテンプレートにそれらを一致させる、隠されたデータブロックとして最初のアイテムをバインドされたデータをレンダリングすることができます：

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