Angular2 enfant composant de données

<ng-content>

Pour projeter le contenu d'un élément (transclusion), vous devrez le <ng-content> élément comme

@Component({
  selector: 'parent',
  directives: [ChildComponent], //needed?
  template: `
    <h1>{{title}}</h1>
    <ul>
       <li *ngFor="letchild of children()">
         <ng-content></ng-content>
       </li>
    </ul>`
})

<ng-content select="xxx">

mais cela ne fonctionnera pas pour votre cas d'utilisation, parce que <ng-content> ne produit pas de contenu, il ne des projets (fonctionne comme un placehoder où les enfants sont affichées à l'intérieur de vos composants de modèle.

Même si *ngFor serait de produire 3 <ng-content> éléments, les enfants ne serait affiché une fois dans la première <ng-content> élément.

<ng-content> permet d'utiliser des sélecteurs comme

<ng-content select="[name=Chris]"></ng-content>

où un modèle comme

<ul>
   <li>
     <ng-content select="[name=Chris]"></ng-content>
   </li>
</ul>`

entraînerait

<h1>Welcome</h2>
<ul>
    <li><b>Chris</b> is on the Blue Team</li>
</ul>

Un plus puissant et plus souple approche a expliqué dans Les événements de liaison lors de l'utilisation d'un ngForTemplate Angulaire 2 (de @kemsky s commentaire)

<template>, @ViewChildren(), et *ngForTemplate

Si vous enchaînez les enfants dans <template> des balises que vous pouvez y accéder en utilisant @ContentChildren() et insérez-les à l'aide de *ngFor et *ngForTemplate.

Je suis à l'aide d'un petit hack ici avec l'intérieur *ngFor. Il y a une meilleure approche de travail en cours (ngTemplateOutlet https://github.com/angular/angular/pull/8021 déjà fusionné)

@Component({
  selector: 'parent',
  template: `
    <h1>{{title}}</h1>
    <ul>
      <li *ngFor="let child of templates">
         <!-- with [child] we make the single element work with 
              *ngFor because it only works with arrays -->
         <span *ngFor="let t of [child]" *ngForTemplate="child"></span>
      </li>
    </ul>
    <div>children:{{children}}</div>
    <div>templates:{{templates}}</div>
    `
})
export class ParentComponent {

  @Input() title;
  @ContentChildren(TemplateRef) templates;
}

@Component({
    selector: 'my-app',
    directives: [ParentComponent],
    template: `
    <h1>Hello</h1>
<parent title="Welcome">
  <template><child name="Chris">Blue Team</child></template>
  <template><child name="Tom">Red Team</child></template>
</parent>    
    `,
})
export class AppComponent {}

Plunker exemple

Voir aussi Comment répéter un morceau de HTML en plusieurs fois sans ngFor et sans autre @Composant pour plus d' ngTemplateOutlet Plunker exemples.

mise à jour Angulaire 5

ngOutletContext a été renommé ngTemplateOutletContext

Voir aussi https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

OriginalL'auteur Günter Zöchbauer