node.js - Încărcător de componente dinamic vs. Încărcare leneșă

Care este diferența între Dynamic Component Loader și Lazy Loading? Trebuie să construiesc o aplicație care să aibă un <router-outlet> la rădăcina aplicației. Problema mea este că nu știu cum să implementez un Component care să redea Child-Components în funcție de date, dinamic. Abordarea mea actuală se bazează pe Dynamic Component Loader, dar folosind această tehnică am probleme legate de urmărirea locației mele, navigarea înapoi etc. Există vreo practică recomandată pentru folosirea „mai multor <router-outlets>” (de exemplu Lazy Loading)?

Mulțumesc!

Răspuns #1

Încărcarea componentelor dinamic nu este legată de Încărcarea Întârziată.

Încărcarea leneșă este o modalitate de a împărți aplicația dvs. în module care sunt încărcate în mod leneș (în background) în loc să încărcați întreaga aplicație de la început. Acest lucru ajută aplicația dvs. să se încarce mai rapid, astfel încât prima pagină să fie redată mai devreme decât ar fi dacă nu ați folosi încărcarea leneșă.

De exemplu, ai putea avea un meniu de setări care încarcă diverse setări, dar nu te aștepți ca utilizatorii să viziteze foarte des acel meniu, așa că pui toate componentele pentru setări într-un modul și apoi setezi ca acel modul să fie încărcat pe măsură ce este necesar (cu alte cuvinte, niciunul dintre acele coduri nu trebuie descărcat decât dacă un utilizator vizitează efectiv ruta /settings).

Toate aplicațiile Angular trebuie să aibă un <router-outlet> în componenta de bază (de obicei AppComponent). Aceasta este o cerință a tuturor aplicațiilor Angular.

S-ar putea să doriți să luați în considerare și utilizarea rutelor auxiliare - acestea sunt opționale și vă permit să încărcați componente în diferite 'locuri'. Puteți citi despre ele aici

Alternativ, poți (pentru cazuri simple) să folosești doar ngIf, astfel:

/app.component.html

<div *ngIf="isOption1(); else Option2">
  <my-option1-component></my-option1-component>
</div>
<ng-template #Option2>
  <my-option2-component></my-option2-component>
</ng-template>

/app.component.ts

public isOption1: boolean {
  return <some test that returns true or false>;
}

Deci, bazându-ne pe logica pe care metoda isOption1 o returnează, utilizatorul va vedea fie componenta Option1 (când este adevărat), fie componenta Option2 (când este fals).