角度2.0 - @ViewQueryと@Queryの相違点

Question

Angular 2 documentationのQueryListの中から、@Queryは、子コンポーネントへの参照を特定のコンポーネントに挿入できるようにする必要があります。

// Parent component's template 
<my-component #test> 

// Parent component 
class ParentComponent { 
    constructor(@Query('test') child: QueryList<any>) {...} 
} 

私は@Queryが一致するコンポーネントではなく、DOM要素を返すことが期待されるが、私は管理されていない：私はそうのような子DOM要素への参照を取得するために管理してきた@QueryViewを使用して

それを動作させるために、またそれを示すドキュメンテーションが見つかりませんでした。

これら二つのデコレータの違いは何ですか？

Answer 1

まず、あなたは光と影DOM DOMが何であるかを理解する必要があります。これらの用語はWebコンポーネントに由来しています。だからhere is the link。一般的には：

• ライトDOM - DOMは、コンポーネントのコンポーネント供給のエンドユーザーということです。
• シャドウDOMは - （コンポーネントのクリエイターとして）あなたでを定義し、エンドユーザーから隠されているコンポーネントの内部DOMです。私が思う

、あなたは簡単に（here is the plunker）何であるかを理解することができ、次の例を見て：

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

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

するので、あなたが質問の答えは非常に単純です：

QueryとViewQueryの違いはViewQueryシャドウDOMでそれらを探している間にQueryはライトDOM内の要素を探しているということです。

PSこの例では、簡単なコンテンツ投影を示しています。しかし、<ng-content>ははるかに複雑なことをすることができます。 this issueを参照してください。