角4：補間を使用した動的テンプレート

Question

非常に一般的なコンポーネントとして設計されているデータテーブルコンポーネントを構築しています。

アイデアは、このような表を定義することである。このように

<app-datatable [items]="currentPageResult"> 
    <app-datatable-column attribute="id" 
          header="ID"></app-datatable-column> 
    <app-datatable-column attribute="name" 
          header="First Name"></app-datatable-column> 
    <app-datatable-column attribute="last_name" 
          header="Last Name"></app-datatable-column> 
</app-datatable> 

を、私たちは、データテーブルの構成要素に配列を指定することができ、およびデータテーブル・カラムを定義することによって、私たちは魔女の属性がテーブルを表示する必要があります決定することができます。内部的には、表ではngFor列、項目ではngForが実行されます。

この部分はシンプルで、今はうまくいきました。カスタムHTMLコンテンツをtdに入れたいと思うと面倒です。このような何か：私は、反復変数としてdataを使用してい

<app-datatable [items]="currentPageResult"> 
    <app-datatable-column attribute="id" 
          header="ID" 
          [template]="titleTemplate"> 
     <ng-template #titleTemplate> 
      <a role="button" [routerLink]="[data.id]"> 
       {{data.id}} 
      </a> 
     </ng-template> 
    </app-datatable-column> 
    <app-datatable-column attribute="name" 
          header="First Name"></app-datatable-column> 
    <app-datatable-column attribute="last_name" 
          header="Last Name"></app-datatable-column> 
</app-datatable> 

お知らせが、それは実際には動作しませんが、私はちょうど私が何をしたいのか説明しています。

これを解決するために、私は、 '$ data'を対応する列/行の値に置き換えるための簡単な文字列とカスタム指示文として '$ data'を使用しました。私は、各tbody tdにappDatatableContentディレクティブを使用していたDataTableコンポーネントで

は（colum設定はテンプレートを持っている場合ディレクティブのみ適用されます）rowデータとcolum設定をpassig：

<table class="table"> 
    <thead> 
    <tr> 
     <th *ngFor="let col of columns" [ngClass]="getColumnHeaderClasses(col)" (click)="onReorder(col)">{{col.header}}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let row of items.Items"> 
     <td *ngFor="let col of columns" appDatatableContent [column]="col" [row]="row"> 
     <ng-container *ngIf="!col.template; else col.template"> 
      {{row[col.attribute]}} 
     </ng-container> 
     </td> 
    </tr> 
    </tbody> 
</table> 

とディレクティブを基本的には内部の「$データ」を含んでおり、このように対応する列の値は「$のSDATA」を置き換える要素を探します。また

ngAfterViewInit() { 
    if (!this.column.template) { 
    return; 
    } 
    const element: HTMLElement = this.element.nativeElement; 
    const value = this.row[this.column.attribute]; 

    const children = element.getElementsByTagName('*'); 
    const length = children.length; 

    for (let i = 0; i < length; i++) { 
    const currentNode = children[i]; 
    if (!currentNode.children || !currentNode.children.length) { 
     const originalHTML: string = currentNode.innerHTML; 
     const fixedHTML = originalHTML.replace('$data', value); 
     currentNode.innerHTML = fixedHTML; 
    } 
    } 
} 

、各セルがあることに気づきます<ng-container *ngIf="!col.template; else col.template">があるので、バインドされたテンプレートがあれば、セルの内容はそのテンプレートをレンダリングしますが、問題は引数（特に行オブジェクト）をテンプレートに渡してテンプレートがそのパラメータで補間を使用できるようにする方法です。

作業plunker参照してください：https://plnkr.co/edit/84jhiquT5q3OQaCxTa5i

をしかし私は単なる文字列の値を置き換えていますので、私は角パワーO、多くの利点を得ることができないので、最善のアプローチであるように思われません。

したがって、カスタムセルの内容をレンダリングするために反復変数を使用できる動的テンプレートを定義するにはどうすればよいですか？

Answer 1

あなたは簡単に

ファースト（ng-template）あなたはEmbeddedViewにコンテキストを渡すことができます内蔵のディレクティブNgTemplateOutletを使用して、あなたの問題を解決することができます

DATA-にマークアップを変更するとDatatableContentDirective

を削除table.component。HTML

<td *ngFor="let col of columns"> 
    <ng-container *ngIf="!col.template; else customTemplate"> 
    {{row[col.attribute]}} 
    </ng-container> 
    <ng-template #customTemplate 
    [ngTemplateOutlet]="col.template" 
    [ngTemplateOutletContext]="{ col: col, row: row }"> 
    </ng-template> 
</td> 

と親コンポーネントに変数テンプレートに関する

<ng-template #titleTemplate let-col="col" let-row="row"> 
    <a role="button" ...> 
     <b>Custom</b> {{row[col.attribute]}} 
    </a> 
</ng-template> 

Plunker Example

も参照してくださいより多くの情報を使用しlet-name

• What is $implicit in angular 2?