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?Qual è la differenza tra @ViewChild e @ContentChild?
risposta
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.
Il post di blog http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/ di Minko Gechew ha più senso per me. @ContentChildren sono i bambini, inseriti dalla proiezione del contenuto (i bambini tra
A me sembra che sia' @ TemplateChildren' (invece di '@ ViewChildren') o' @ HostChildren' (invece di '@ ContentChildren') sarebbe stato un nome molto migliore, in quanto in questo contesto tutto ciò di cui stiamo parlando è correlato alla vista e vincolante – superjos
'@ ViewChildren' == il proprio figlio;' @ ContentChildren' == il figlio di qualcun altro – candidJ
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.
Quindi utilizzare @ViewChild (ren) a meno che non si disponga di componenti nella vista, nel qual caso ricorrere a @ContentChild (ren)? –
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.
- 1. Qual è la differenza tra = e: =
- 2. Qual è la differenza tra Verilog! e ~?
- 3. Qual è la differenza tra? : e ||
- 4. qual è la differenza tra [[], []] e [[]] * 2
- 5. Qual è la differenza tra $ e $$?
- 6. Qual è la differenza tra ("") e (null)
- 7. Qual è la differenza tra dict() e {}?
- 8. Qual è la differenza tra " " e ""?
- 9. Qual è la differenza tra {0} e ""?
- 10. Qual è la differenza tra `##` e `hashCode`?
- 11. Qual è la differenza tra {0} e +?
- 12. Qual è la differenza tra .ToString() e + ""
- 13. qual è la differenza tra:.! e: r !?
- 14. Qual è la differenza tra "è Nessuno" e "== Nessuno"
- 15. Unix: Qual è la differenza tra la fonte e l'esportazione?
- 16. Qual è la differenza tra il callback e la promessa
- 17. Qual è la differenza tra la sezione .got e .got.plt?
- 18. Qual è la differenza tra la lista() e []
- 19. Qual è la differenza tra GHC e la piattaforma Haskell?
- 20. Qual è la differenza tra sé e la finestra?
- 21. Qual è la differenza tra la cartella vim72 e vimfiles?
- 22. Qual è la differenza tra la serratura e RLock
- 23. Qual è la differenza tra la funzione() {}() e function() {}()
- 24. Qual è la differenza tra la crittografia SHA e AES?
- 25. Qual è la differenza tra la [OptionalField] e [NonSerialized]
- 26. Qual è la differenza tra Chisel e Lava e CLaSH?
- 27. Qual è la differenza tra queste funzioni
- 28. Qual è la differenza tra queste funzioni?
- 29. Qual è la differenza tra Response.Write() eResponse.Output.Write()?
- 30. Qual è la differenza tra applicationDidReceiveMemoryWarning, didReceiveMemoryWarning?
Questo collegamento mi ha aiutato http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/ dopo aver letto le risposte di seguito. Saluti :) –