Componente hijo Angular2 como datos

Question

Digamos que tengo dos componentes: parent e child . El HTML se vería así:

<parent title="Welcome">
    <child name="Chris">Blue Team</child>
    <child name="Tom">Red Team</child>
</parent>

El resultado final se vería así:

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

El componente padre:

@Component({
  selector: ''parent'',
  directives: [ChildComponent], // needed?
  template: `
    <h1>{{title}}</h1>
    <ul>
       <li *ngFor="#child of children()">{{child.content}}<li>
    </ul>`
})
export class ParentComponent {

    @Input() title;

    children() {
        // how?
    }

}

¿Cómo accedo a los componentes secundarios desde el padre y obtengo su contenido?

Además, no quiero que los niños se representen automáticamente. Dependiendo de algunas condiciones, puedo elegir no mostrar a ciertos niños.

Gracias.

Answer 1

¿Quizás estás buscando esto? https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var

Puede asignar una var local a cualquier elemento secundario en la vista principal

<child #child1></child>
<child #child2></child>
<button (click)="child1.doSomething()">Trigger child1</button>

Answer 2

<ng-content>

Para proyectar contenido a un elemento (transclusión) necesitaría el elemento <ng-content> como

@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">

pero eso no funcionará para su caso de uso porque <ng-content> no produce contenido, solo lo proyecta (funciona como un marcador de posición donde se muestran los elementos secundarios dentro de su plantilla de componentes.

Aunque *ngFor produciría 3 elementos <ng-content> , los elementos *ngFor solo se mostrarían una vez en el primer elemento <ng-content> .

<ng-content> permite usar selectores como

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

donde una plantilla como

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

daría como resultado

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

Un enfoque más flexible y poderoso explicado en Eventos de enlace cuando se usa ngForTemplate en Angular 2 (del comentario de @kemsky)

<template> , @ViewChildren() y *ngForTemplate

Si envuelve los elementos secundarios en etiquetas <template> , puede acceder a ellos usando @ContentChildren() e insertarlos usando *ngFor y *ngForTemplate .

Estoy usando un pequeño truco aquí con el *ngFor interno. Hay un mejor enfoque de trabajo en progreso ( ngTemplateOutlet https://github.com/angular/angular/pull/8021 ya fusionado)

@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 {}

Ejemplo de Plunker

Consulte también Cómo repetir un fragmento de HTML varias veces sin ngFor y sin otro @Component para obtener más ejemplos de ngTemplateOutlet Plunker.

actualizar Angular 5

ngOutletContext fue renombrado a ngTemplateOutletContext

Ver también https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29