Qual è la differenza tra @ViewChild e @ContentChild?

Question

Angular 2 fornisce @ViewChild, @ViewChildren, @ContentChild e @ContentChildren decoratori per l'interrogazione degli elementi discendenti di un componente. Qual è la differenza tra i primi due e gli ultimi due?

Answer 1

Risponderò alla tua domanda utilizzando Ombra DOM e Luce DOM terminologia (che sono venuti da componenti web, vedi here). In generale:

• Ombra DOM - è un DOM interna del componente che si definisce da voi (come creatore del componente) e nascosto da un utente finale. Per esempio:

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

• Luce DOM - è un DOM che un utente finale della vostra fornitura di componenti nel componente. Per esempio:

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

Quindi, la risposta alla tua domanda è piuttosto semplice:

La differenza tra @ViewChildren e @ContentChildren è che @ViewChildren cercare elementi in ombra DOM mentre @ContentChildren cercarli in DOM leggero.

Answer 2

Come suggerisce il nome, @ContentChild e @ContentChildren query torneranno direttive esistenti all'interno dell'elemento <ng-content></ng-content> della visualizzazione, mentre @ViewChild e @ViewChildren guardare solo a elementi che sono sul vostro modello di vista direttamente.

Answer 3

Questo video da Angular Connect ha ottime informazioni su ViewChildren, ViewChild, ContentChildren e ContentChild https://youtu.be/4YmnbGoh49U

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

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

Dal punto di vista my-widget s', comp-a è il ContentChild e comp-b è la ViewChild. CompomentChildren e ViewChildren restituiscono un iterable mentre xChild restituisce una singola istanza.