angular - Passer des données de portée dans ng-content en Angular2

Je cherche une solution pour passer les données du périmètre actuel du composant dans la directive ng-content.

J'ai un modèle de composant app-table avec des données que je veux transmettre au contenu enfant, en utilisant une solution comme celle-ci :

<!-- 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

Et le modèle de page où je veux utiliser ces données :

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

Est-ce possible ?

Réponse #1

J'ai rencontré le même problème, pour plus de précision, j'ai ajouté votre exemple fonctionnel.

<!-- 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

Dans le composant, vous devez déclarer templateRef comme ceci.

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

  ...
}

Ensuite, utilisez votre composant comme ceci.

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

Réponse #2

Je pense que vous pourriez trouver votre réponse ici : Angular 2 passer du HTML à ng-content avec des liaisons.

Le composant ng-content est malheureusement mal documenté. Il le sera bientôt, selon le problème GitHub d'Angular (https://github.com/angular/angular.io/issues/3099).