Șablonul unui component nu va fi întotdeauna fix. Aplicația ta ar putea avea nevoie să încarce componente noi în timpul rulării.
Scenarii de utilizare:
1. Încărcarea paginilor încarcă componente diferite în funcție de parametri diferiți, arătând efecte diferite
2. Pagina este compusă din mai multe elemente, nu toate trebuie afișate la început, iar informații specifice vor fi afișate după ce utilizatorul dă click, cum ar fi: tab-uri, ferestre modale dinamice pop-up etc.
Scenariul de utilizare al acestui articol este 2, doar imaginează-ți,Dacă nu folosești încărcarea dinamică, când deschizi interfața principală, toate componentele ascunse ale paginii vor fi încărcate, iar toate componentele apelează la serviciile corespunzătoare de interfață; de multe ori, nu avem nevoie să vedem toate informațiile, ceea ce este o mare risipă de resurse și poate determina încărcarea lentă a interfeței principale, afectând experiența utilizatorului。
Există două moduri de a încărca dinamic componente în ng:
Încărcați componentele deja declarate: Folosiți ComponentFactoryResolver pentru a reda o instanță a unui component într-o altă vizualizare a componentei;
Creează și încarcă componente dinamic: Folosește ComponentFactory și Compiler pentru a crea și randa componente
În funcție de nevoile noastre, componentele individuale sunt dezvoltate dinainte și trebuie afișate pe aceeași componentă. Așadar, prima metodă îndeplinește cerințele noastre.
Pentru a încărca dinamic componente folosind ComponentFactoryResolver, trebuie să înțelegi următoarele concepte:
- ViewChild: Decorator de proprietăți, prin care poți obține elementele corespunzătoare în vedere;
- ViewContainerRef: Un container de vizualizare pe care componentele pot fi create și eliminate;
- ComponentFactoryResolver: Un parser de componente care poate reda un component pe o vizualizare a altuia.
Mai întâi, să ne uităm la randări, să dăm click pe butonul modal1 pentru a încărca dinamic componenta modal1 și pe butonul modal2 pentru a încărca dinamic componenta modal2.
Mai întâi, creăm un proiect unghiular.
Creează 4 componente, și anume index, modal1, modal2 și modal3, dintre care modal1 și modal2 sunt componentele noastre încărcate dinamic.
Componenta indicii
HTML:
TS:
Componenta modal1
HTML:
TS:
Componenta modal2
HTML:
TS:
Componenta modal3
HTML:
TS:
Le-am tipărit numele pe constructor pentru 3 modale.
Modal1 și Modal2 sunt ambele încărcate dinamic, doar când butonul este apăsat pentru încărcare, constructorul de execuție va fi declanșat, modal3 nu folosește încărcare dinamică, iar după încărcarea interfeței părinte, constructorul interfeței modal3 va fi executat imediat.
Astfel, poți vedea avantajele încărcării dinamice, iar încărcarea nu se va încărca dacă nu o folosești, similar cu încărcarea leneșă în C#.
Descărcare cod sursă:
Turiști, dacă vreți să vedeți conținutul ascuns al acestei postări, vă rog Răspunde
Resurse:Autentificarea cu hyperlink este vizibilă.
|
Postat pe 29.05.2020 16:40:00
|
|
|
|
Proprietarul|
Postat pe 24.07.2020 17:52:58
|
Postat pe 26.10.2022 17:27:19
|
