Jaka jest różnica między @ViewChild i @ContentChild?

Question

Angular 2 dostarcza , @ViewChildren, @ContentChild i @ContentChildren dekoratorów do sprawdzania elementów potomnych elementu. Jaka jest różnica między dwoma pierwszymi a dwoma ostatnimi?

Answer 1

będę odpowiedzieć na pytanie korzystając Cień DOM i Światło DOM terminologii (ona pochodzić z komponentów sieciowych, zobacz here). Ogólnie:

• Cień DOM - jest wewnętrzną DOM swojego składnika, który jest zdefiniowany przez Ciebie (jako twórcy komponentu) i ukryty od użytkownika końcowego. Na przykład:

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

• światła DOM - jest DOM że użytkownik końcowy swojego zaopatrzenia komponent do swojego urządzenia. Na przykład:

@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 { /* ... */ } 

więc odpowiedź na Twoje pytanie jest dość prosta:

Różnica między @ViewChildren i @ContentChildren że @ViewChildren wygląd elementów w cieniu DOM podczas @ContentChildren szukać ich w Lekki DOM.

Answer 2

Jak sama nazwa wskazuje, @ContentChild i @ContentChildren zapytania powróci dyrektyw istniejących wewnątrz elementu <ng-content></ng-content> swojego widzenia, natomiast @ViewChild i @ViewChildren patrzeć tylko na te elementy, które na widok szablonu bezpośrednio.

Answer 3

Ten film z Kątowymi Połącz ma doskonałe informacje o ViewChildren, ViewChild, ContentChildren i ContentChild https://youtu.be/4YmnbGoh49U

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

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

z perspektywy my-widget „s, comp-a jest ContentChild i comp-b jest ViewChild. CompomentChildren i ViewChildren zwracają wartość iterowalną, podczas gdy xChild zwraca pojedynczą instancję.