Angular 2.0 - Was ist der Unterschied zwischen @ViewQuery und @Query

Question

Von dem, was ich in der Angular 2 documentation von QueryList gelesen haben, @Query sollte für die Fähigkeit, erlauben einen Verweis auf eine untergeordnete Komponente in eine bestimmte Komponente zu injizieren.

Mit @QueryView ich habe es geschafft, wie so eine Referenz auf ein Kind DOM-Element erhalten:

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

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

Ich erwartete, dass @Query die passende Komponente zurückgeben kann eher als die DOM-Element, aber ich habe es nicht geschafft um es zum Laufen zu bringen, noch habe ich irgendeine Dokumentation gefunden, die das anzeigt.

Was ist der Unterschied zwischen diesen beiden Dekorateuren?

Answer 1

Zuerst müssen Sie verstehen, was das Light DOM und Shadow DOM sind. Diese Terminologien stammen von Web-Komponenten. Also here is the link. Allgemein gilt:

• Licht DOM - ist das DOM dass die Endbenutzer Ihrer Komponente Versorgung in Ihrer Komponente.
• Schatten DOM - ist der interne DOM Ihrer Komponente, die von Ihnen definiert ist (als Schöpfer der Komponente) und vom Endbenutzer verborgen.

Ich denke, beim nächsten Beispiel suchen, können Sie leicht verstehen, was was ist (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 { /* ... */ } 

Also, die Antwort für Sie Frage ist ziemlich einfach:

Die Unterschied zwischen Query und ViewQuery ist, dass Query Elemente in Light DOM sucht, während ViewQuery sucht sie in Shadow DOM.

PS Das Beispiel zeigt einfache Inhalt Projektion. Aber <ng-content> kann viel komplexere Dinge tun. Siehe this issue.