ViewChildernとContentChildernの違いと、両方を実質的に使用する方法は？

Question

私はおそらくViewChildrenとContentChildrenとその実際的な使用法と混同しています。

実際にどのように使用するか教えてください。彼らの目的は何ですか？

@Component({ 
selector: 'my-app', 
    template: ` 
<h4>ParentCmp</h4> 
<button (click)="clicked()">show/hide</button> 

<child> first child from childcmp </child> 
<bR><bR> 
<child *ngIf="show"> second child from childcmp </child> 
<bR><bR> 
<child1></child1> 
`, 
    directives: [childcmp,child1cmp], 

}) 


export class ParentCmp { 
    show:boolean=true; 

    @ViewChildren(childcmp) viewChildren: QueryList<childcmp>; 

    @ContentChildren(childcmp) contentChildren: QueryList<childcmp>; 


    ngAfterViewInit() 
    { 
    console.log('viewChildren-> ' + this.viewChildren.length); 
    console.log('contentChildren-> ' + this.contentChildren.length); 
    } 

    clicked() 
    { 
    this.show=!this.show; 
    this.viewChildren.changes.subscribe(() => console.log('viewChildren-> ' + this.viewChildren.length)); 
    this.contentChildren.changes.subscribe(() => console.log('contentChildren-> ' + this.contentChildren.length)); 
} 

} 

bootstrap(ParentCmp, []); 

child.ts

import {Component} from 'angular2/core'; 

@Component({ 

    selector:'child', 
    template:` 

    <h5>child cmp</h5> 
    <ng-content></ng-content> 

    ` 
}) 

export class childcmp{ 
    msg() 
    { 
    console.log('msg from child'); 
    } 
} 

child1.tsこのセットアップに関連

import {Component} from 'angular2/core'; 

@Component({ 

    selector:'child1', 
    template:` 

    <h5>child1 cmp</h5> 
    <ng-content></ng-content> 

    `  
}) 

export class child1cmp{ 
    msg() 
    { 
    console.log('msg from child1'); 
    } 
} 

質問。

ここに私のコードをチェック - http://plnkr.co/edit/F2pJn1zxGFdFYzpeEwe1?p=preview

1）ParentComponentは3人の子供（two child typeとone child1 type）

<child></child> 
<child></child> 
<child1></child1> 

は、どのように私は3人の子供のための3カウント得ることができたのか？

2）ViewChildrenとContentChildrenを使用するための論理的/実用的な方法は何ですか？（その使い方と方法はかなり混乱しています）。

Answer 1

「ビュー」はコンポーネントのテンプレートであり、コンテンツは<ng-content>を使用して投影されたHTMLです。 ParentCmpで

あなたが要素にアクセスしたい場所に応じて、あなたは@ContentChildren()（投影コンテンツ）対@ViewChildren()（コンポーネントテンプレート）を使用

@ContentChildren()、それはそれで<ng-content>タグは、テンプレートの持っていないため、冗長です。

ChildおよびChild1には<ng-content>タグがあり、そこには@ContentChilden()という意味があります。あなたは

<child> 
    <child1><child1> 
</child> 

のように親のテンプレートで子コンポーネントを使用する場合
はその後Childに、あなたは@ContentChildren()結果としてChild1要素を取得します。

はPlunker