Componente figlio angolare2 come dati

Question

Diciamo che ho due componenti: parent e child. Il codice HTML sarebbe simile a questa:

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

L'output finale sarà simile:

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

Il componente principale:

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

} 

Come accedo i componenti figlio dall'interno del genitore e ottieni il loro contenuto?

Inoltre, non voglio che i bambini vengano automaticamente renderizzati. A seconda delle condizioni, posso scegliere di non mostrare determinati bambini.

Grazie.

Answer 1

<ng-content>

Per proiettare il contenuto di un elemento (inclusione) si avrebbe bisogno l'elemento <ng-content> come

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

ma che non funziona per il vostro caso d'uso a causa <ng-content> non produce contenuti, proietta solo (funziona come un placehoder in cui i bambini vengono visualizzate all'interno del tuo template componenti.

Anche se *ngFor produce 3 elementi <ng-content>, i bambini vengono visualizzati solo una volta nel primo elemento <ng-content>.

<ng-content> permette di utilizzare selettori come

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

in cui un modello di come

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

comporterebbe

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

Un approccio più flessibile e potente spiegato nel Binding events when using a ngForTemplate in Angular 2 (da @ commento di kemsky)

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

Se si avvolgono i bambini in <template> tag è possibile accedervi utilizzando @ContentChildren() e inserirli utilizzando *ngFor e *ngForTemplate.

Qui sto utilizzando un piccolo trucco con interno *ngFor. C'è un lavoro migliore approccio in corso (ngTemplateOutlethttps://github.com/angular/angular/pull/8021 già fuse)

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

Vedi anche How to repeat a piece of HTML multiple times without ngFor and without another @Component per ulteriori esempi ngTemplateOutlet Plunker.

aggiornamento angolare 5

ngOutletContext stato rinominato in ngTemplateOutletContext

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

Answer 2

Forse stai cercando questo? https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var

È possibile assegnare una var locale per ogni bambino in vista padre

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