Angular2子組件作爲數據

Question

比方說，我有兩個組件：parent和child。該HTML應該是這樣的：

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

最後的結果將是這樣的：

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

父組件：

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

} 

如何從母體內獲得的子組件並獲得他們的內容？

此外，我不希望孩子被自動呈現。根據某些條件，我可能會選擇不顯示某些孩子。

謝謝。

Answer 1

<ng-content>

一個局部變量分配給任何孩子投影內容的元素（包含），你需要像<ng-content>元素

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

但不會爲您的使用情況下工作，因爲<ng-content>不產生內容，它不僅是項目它（作品爲其中兒童被你的組件模板中顯示的placehoder。

儘管*ngFor會生成3 <ng-content>元素，但子元素只會在第一個元素中顯示一次。

<ng-content>允許使用選擇像

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

其中類似

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

模板會導致

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

一個更加靈活和強大的方法在Binding events when using a ngForTemplate in Angular 2解釋（來自@ kemsky的評論）

<template>，@ViewChildren()和*ngForTemplate

如果您在包裝標籤<template>您可以使用@ContentChildren()訪問它們，並使用*ngFor和*ngForTemplate插入他們的孩子。

我在這裏使用了一個小內幕*ngFor。目前正在進行一個更好的方法的工作（ngTemplateOutlethttps://github.com/angular/angular/pull/8021已經合併）

@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

又見How to repeat a piece of HTML multiple times without ngFor and without another @Component更多ngTemplateOutlet Plunker例子。

更新角5

ngOutletContext更名爲ngTemplateOutletContext

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

Answer 2

也許您正在尋找？ https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var

可以在父視圖

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