@ViewChildと@ContentChildの違いは何ですか？

Question

角2は、コンポーネントの子孫要素を照会するための,@ViewChildren,@ContentChildおよび@ContentChildrenのデコレータを提供します。最初の2つと後の2つの違いは何ですか？

Answer 1

私は（それがWebコンポーネントから来ている、hereを参照してください）シャドウDOMとライトDOM用語を使用して、あなたの質問にお答えします。一般的には：

• シャドウDOMは - （コンポーネントのクリエイターとして）あなたでを定義し、エンドユーザーから隠されているコンポーネントの内部DOMです。例えば：

@Component({ selector: 'some-component', template: ` <h1>I am Shadow DOM!</h1> <h2>Nice to meet you :)</h2> <ng-content></ng-content> `; }) class SomeComponent { /* ... */ } 

• ライトDOM - コンポーネントにコンポーネント供給エンドユーザーことがDOMです。たとえば：

@Component({ 
    selector: 'another-component', 
    directives: [SomeComponent], 
    template: ` 
    <some-component> 
     <h1>Hi! I am Light DOM!</h1> 
     <h2>So happy to see you!</h2> 
    </some-component> 
    ` 
}) 
class AnotherComponent { /* ... */ } 

だから、あなたの質問への答えは非常に簡単です：

@ViewChildrenと@ContentChildrenの違いは、シャドウDOM内の要素のための@ViewChildren見ながら、彼らのために@ContentChildren表情でライトDOM。

Answer 2

名の通り@ViewChildと@ViewChildrenのみ直接あなたのビューテンプレート上にある要素を見てのに対し、@ContentChildと@ContentChildrenクエリは、ビューの<ng-content></ng-content>要素内の既存のディレクティブを返します。

Answer 3

アンギュラ接続からこのビデオでは、comp-aがContentChildとcomp-bViewChildであり、

https://youtu.be/4YmnbGoh49U ViewChildren、ViewChild、ContentChildrenとContentChildについて

@Component({ 
    template: ` 
    <my-widget> 
     <comp-a/> 
    </my-widget> 
` 
}) 
class App {} 

@Component({ 
    selector: 'my-widget', 
    template: `<comp-b/>` 
}) 
class MyWidget {} 

my-widgetの観点から優れた情報を持っています。 CompomentChildrenおよびViewChildrenは、xChildが1つのインスタンスを返す間に繰り返し可能な値を返します。