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.