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

viewchild undefined angular 6

Question

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?

Answer 1

Como su nombre indica, las consultas @ContentChild y @ContentChildren devolverán las directivas existentes dentro del elemento <ng-content></ng-content> de su vista, mientras que @ViewChild y @ViewChildren solo miran los elementos que están en su plantilla de vista directamente .

Answer 2

Contestaré su pregunta usando la terminología de Shadow DOM y Light DOM (proviene de componentes web, vea here ). En general:

• Shadow DOM : es un DOM interno de su componente definido por usted (como creador del componente ) y oculto a un usuario final. Por ejemplo:

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

• DOM ligero : es un DOM que un usuario final de su componente suministra a su componente. Por ejemplo:

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

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.

Answer 3

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

@Component({
template: `
<my-widget>
<comp-a/>
</my-widget>
`
})
class App {}
@Component({
selector: ''my-widget'',
template: `<comp-b/>`
})
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.