angular - Angular2でng-contentにスコープデータを渡す

現在のコンポーネントスコープのデータを ng-content ディレクティブに渡すための解決策を探しています。

私は、子コンテンツに渡したいデータを持つ app-table コンポーネントのテンプレートを持っており、このような方法を使っています:

<!-- some html before -->
<table>
    <!-- complex header markup with sorting/filtering support -->

    <tr *ngFor="let item of data">
         <ng-content [value]="item"></ng-content> //how to pass data?
    </tr>
</table>
//some html after

そして、このデータを使用したいページテンプレート:

<app-table>
     <td>{{value.Name}}</td>
     ...
</app-table>

これは可能ですか？

回答 #1

私も同じ問題に直面しました。より明確にするために、あなたの例を動作する形で追加しました。

<!-- some html before -->
<table>
    <!-- complex header markup with sorting/filtering support -->

    <tr *ngFor="let item of data">
      <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
    </tr>
</table>
//some html after

コンポーネントでは、templateRef をこのように宣言する必要があります。

export class AppTableComponent {
  ...
  @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

  ...
}

それから、このようにコンポーネントを使用します。

<app-table>
 <ng-template let-item>
     <td>{{item.Name}}</td>
     ...
 </ng-template>
</app-table>

回答 #2

あなたはここで答えを見つけられると思います：Angular 2でバインディングを使ってhtmlをng-contentに渡す方法。

残念ながら、ng-content コンポーネントはドキュメントが不十分です。Angular の GitHub の問題（https://github.com/angular/angular.io/issues/3099）によると、まもなく改善される予定です。