Componente infantil Angular2 como datos

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

  Blue Team Red Team  

El resultado final se vería así:

 

Welcome

  • Chris is on the Blue Team
  • Tom is on the Red Team

El componente principal:

 @Component({ selector: 'parent', directives: [ChildComponent], // needed? template: ` 

{{title}}

  • {{child.content}}
` }) export class ParentComponent { @Input() title; children() { // how? } }

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

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

Gracias.

Para proyectar contenido a un elemento (transclusión) necesitaría el elemento como

 @Component({ selector: 'parent', directives: [ChildComponent], // needed? template: ` 

{{title}}

` })

pero eso no funcionará para su caso de uso porque no produce contenido, solo lo proyecta (funciona como un “placehoder” donde los niños se muestran dentro de la plantilla de sus componentes.

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

permite usar selectores como

  

donde una plantilla como

 
`

daría lugar a

 

Welcome
  • Chris is on the Blue Team

Un enfoque más flexible y poderoso explicado en Eventos vinculantes al usar un ngForTemplate en Angular 2 (del comentario de @kemsky)

, @ViewChildren() y *ngForTemplate

Si *ngFor *ngForTemplate tags , puede acceder a ellos usando @ContentChildren() e insertarlos usando *ngFor y *ngForTemplate .

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

 @Component({ selector: 'parent', template: ` 

{{title}}

children:{{children}}
templates:{{templates}}
` }) export class ParentComponent { @Input() title; @ContentChildren(TemplateRef) templates; } @Component({ selector: 'my-app', directives: [ParentComponent], template: `

Hello

`, }) 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 se renombró a ngTemplateOutletContext

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

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 hijo en la vista principal