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

Solución:

Responderé tu pregunta usando DOM de sombra y DOM ligero terminología (proviene de componentes web, ver más aquí). En general:

• DOM de sombra – es un DOM interno de su componente que está definido por ti (como un creador del componente) y oculto para el 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 suministro en 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 eso @ViewChildren busque elementos en Shadow DOM mientras @ContentChildren búscalos en Light DOM.

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

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 {}

De my-widgetperspectiva, comp-a es el ContentChild y comp-b es el ViewChild. CompomentChildren y ViewChildren devuelve un iterable mientras que xChild devuelve una sola instancia.

---

---

Utiliza Nuestro Buscador