Was ist der Unterschied zwischen @ViewChild und @ContentChild?

Question

Angular 2 stellt @ViewChild, @ViewChildren, @ContentChild und @ContentChildren Dekoratoren für die Abfrage der abstammenden Elemente einer Komponente bereit. Was ist der Unterschied zwischen den ersten beiden und den letzten beiden?

Answer 1

Ich werde Ihre Frage mit Schatten DOM und Licht DOM Terminologie beantworten (es von Web-Komponenten kommen, siehe here). Allgemein gilt:

• Schatten DOM - ist eine interne DOM Ihrer Komponente, die von Ihnen definiert ist (als Schöpfer der Komponente) und von einem Endbenutzer verborgen. Zum Beispiel:

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

• Licht DOM - ist ein DOM dass ein Endbenutzer Ihrer Komponente Versorgung in Ihrer Komponente. Zum Beispiel:

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

die Antwort auf Ihre Frage ist also recht einfach:

Der Unterschied zwischen @ViewChildren und @ContentChildren ist, dass @ViewChildren Look für Elemente in Schatten DOM während @ContentChildren sucht sie in Licht DOM.

Answer 2

Wie der Name schon sagt, @ContentChild und @ContentChildren Abfragen werden Richtlinien Rückkehr innerhalb des <ng-content></ng-content> Element Ihrer Ansicht bestehenden, während @ViewChild und @ViewChildren nur auf Elemente suchen, die direkt auf Ihrer Ansicht Vorlage sind.

Answer 3

Dieses Video von Angular Connect verfügt über hervorragende Informationen über ViewChildren, ViewChild, ContentChildren und ContentChild https://youtu.be/4YmnbGoh49U

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

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

Von my-widget ‚Sicht comp-a die ContentChild und comp-b ist die ViewChild. CompomentChildren und ViewChildren geben ein iterables zurück, während xChild eine einzelne Instanz zurückgibt.