Thành phần con Angular2 là dữ liệu

Question

Giả sử tôi có hai thành phần: parent và child. HTML sẽ trông như thế này:

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

Kết quả cuối cùng sẽ như thế nào:

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

Các thành phần cha mẹ:

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

} 

Làm thế nào để truy cập vào các thành phần trẻ từ bên trong phụ huynh và lấy nội dung của họ?

Ngoài ra, tôi không muốn các trẻ em được tự động hiển thị. Tùy thuộc vào một số điều kiện tôi có thể chọn không hiển thị một số trẻ em.

Cảm ơn.

Answer 1

<ng-content>

Đối chiếu nội dung vào một yếu tố (nhúng), bạn sẽ cần những yếu tố <ng-content> như

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

nhưng điều đó sẽ không làm việc đối với trường hợp sử dụng của bạn bởi vì <ng-content> không tạo ra nội dung, nó chỉ dự án đó (chỉ hoạt động như một placehoder nơi trẻ em được hiển thị trong mẫu thành phần của bạn.

Mặc dù *ngFor sẽ sản xuất 3 <ng-content> yếu tố, trẻ em sẽ chỉ được hiển thị một lần trong phần tử <ng-content> đầu tiên.

<ng-content> cho phép sử dụng bộ chọn như

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

nơi một mẫu như

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

sẽ cho kết quả trong

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

Một cách tiếp cận linh hoạt hơn và mạnh mẽ được giải thích trong Binding events when using a ngForTemplate in Angular 2 (từ @ kemsky s bình luận)

<template>, @ViewChildren(), và *ngForTemplate

Nếu bạn quấn con trong <template> thẻ bạn có thể truy cập chúng bằng @ContentChildren() và chèn chúng bằng cách sử *ngFor và *ngForTemplate.

Tôi đang sử dụng một chút hack ở đây với bên trong *ngFor. Có một phương pháp làm việc tốt hơn cơ bản dở dang (ngTemplateOutlethttps://github.com/angular/angular/pull/8021 đã được sáp nhập)

@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

Xem thêm How to repeat a piece of HTML multiple times without ngFor and without another @Component để biết thêm ngTemplateOutlet ví dụ Plunker.

cập nhật góc 5

ngOutletContext được đổi tên thành ngTemplateOutletContext

Xem thêm https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

Answer 2

Có lẽ bạn đang tìm kiếm điều này? https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var

Bạn có thể gán một var địa phương để bất kỳ đứa trẻ theo quan điểm của cha mẹ

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