Angular 2.0 - Jaka jest różnica między @ViewQuery a @Query

Question

Z tego, co przeczytałem w Angular 2 documentation z QueryList, @Query, powinno umożliwić możliwość wstrzyknięcia odniesienia do komponentu potomnego do danego komponentu.

Korzystanie @QueryView udało mi się uzyskać odwołanie do dziecka elementu DOM tak:

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

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

Spodziewałem się, że @Query może zwrócić element pasujący zamiast elementu DOM, ale nie udało aby to działało, ani nie znalazłem żadnej dokumentacji, która by to wskazywała.

Jaka jest różnica między tymi dwoma dekoratorów?

Answer 1

Po pierwsze, musisz zrozumieć, jakie są światła i cienia DOM DOM. Te terminologie pochodzą z komponentów sieciowych. Tak więc here is the link. Ogólnie:

• Światło DOM - jest DOM że użytkownik końcowy swojego zaopatrzenia komponent do swojego urządzenia.
• Cień DOM - jest wewnętrzną DOM swojego składnika, który jest zdefiniowany przez Ciebie (jako twórcy komponentu) i ukryte przed użytkownikiem końcowym.

myślę, patrząc na następnym przykładzie można łatwo zrozumieć, co jest co (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 { /* ... */ } 

Więc odpowiedź dla ciebie pytanie jest dość prosta:

różnica między Query i ViewQuery że Query poszukuje elementów w świetle DOM podczas ViewQuery szuka dla nich w cieniu DOM.

PS Przykład pokazuje proste projekcje treści. Ale <ng-content> może robić o wiele bardziej skomplikowane rzeczy. Zobacz this issue.