¿Cuál es la diferencia entre @ViewChild y @ContentChild?

Angular 2 proporciona @ViewChild , @ViewChildren , @ContentChild y @ContentChildren para consultar los elementos descendientes de un componente. ¿Cuál es la diferencia entre los dos primeros y los dos últimos?

Responderé a tu pregunta utilizando la terminología DOM de Shadow y Light DOM (proviene de componentes web, mira aquí ). En general:

  • Shadow DOM – es un DOM interno de su componente que usted define (como creador del componente ) y que está oculto para un usuario final. Por ejemplo:
 @Component({ selector: 'some-component', template: ` 

I am Shadow DOM!

Nice to meet you :)

`; }) class SomeComponent { /* ... */ }
  • Light DOM – es un DOM que un usuario final de su componente suministra a su componente. Por ejemplo:
 @Component({ selector: 'another-component', directives: [SomeComponent], template: `  

Hi! I am Light DOM!

So happy to see you!

` }) class AnotherComponent { /* ... */ }

Entonces, la respuesta a tu pregunta es bastante simple:

La diferencia entre @ViewChildren y @ContentChildren es que @ViewChildren busca elementos en Shadow DOM mientras que @ContentChildren busca en Light DOM.

Como su nombre lo sugiere, las consultas @ContentChild y @ContentChildren devolverán las directivas existentes dentro del elemento de su vista, mientras que @ViewChild y @ViewChildren solo verán los elementos que están en su plantilla de vista directamente .

Este video de Angular Connect tiene información excelente sobre ViewChildren, ViewChild, ContentChildren y ContentChild https://youtu.be/4YmnbGoh49U

 @Component({ template: `    ` }) class App {} @Component({ selector: 'my-widget', template: `` }) class MyWidget {} 

Desde la perspectiva de my-widget , comp-a es ContentChild y comp-b es ViewChild . CompomentChildren y ViewChildren devuelven un iterable mientras que xChild devuelve una sola instancia.