Il modello di un componente non sarà sempre fisso. La tua app potrebbe dover caricare nuovi componenti durante l'esecuzione.
Scenari di utilizzo:
1. Il caricamento delle pagine carica componenti diversi secondo parametri differenti, mostrando effetti differenti
2. La pagina è composta da più elementi, non tutti devono essere visualizzati all'inizio, e informazioni specifiche verranno mostrate dopo i clicchi dell'utente, come: schede a schede, finestre modali dinamiche a pop-up, ecc.
Lo scenario d'uso di questo articolo è 2, immagina solo,Se non usi il caricamento dinamico, quando apri l'interfaccia principale, tutti i componenti nascosti della pagina verranno caricati e tutti i componenti richiameranno i rispettivi servizi di interfaccia; spesso, non abbiamo bisogno di vedere tutte le informazioni, il che è uno spreco di risorse e può anche causare un caricamento lento dell'interfaccia principale, influenzando l'esperienza utente。
Ci sono due modi per caricare dinamicamente i componenti in ng:
Caricare componenti già dichiarati: Usa ComponentFactoryResolver per renderizzare un'istanza di un componente in un'altra vista componente;
Crea e carica i componenti dinamicamente: Usa ComponentFactory e Compiler per creare e renderizzare componenti
Secondo le nostre esigenze, i singoli componenti sono sviluppati in anticipo e devono essere visualizzati sullo stesso componente. Quindi il primo modo soddisfa i nostri requisiti.
Per caricare dinamicamente i componenti usando ComponentFactoryResolver, è necessario comprendere i seguenti concetti:
- ViewChild: Decoratore di proprietà, attraverso il quale puoi ottenere gli elementi corrispondenti nella vista;
- ViewContainerRef: Un container di visualizzazione su cui i componenti possono essere creati ed eliminati;
- ComponentFactoryResolver: Un parser di componenti che può renderizzare un componente su una vista di un altro.
Per prima cosa, guardiamo i rendering, clicchiamo sul pulsante modal1 per caricare dinamicamente il componente modal1, e clicchiamo sul pulsante modal2 per caricare dinamicamente il componente modal2.
Per prima cosa, creiamo un progetto angolare.
Crea 4 componenti, ovvero indice, modale1, modale 2 e modale 3, di cui modale 1 e modale 2 sono i nostri componenti dinamicamente carichi.
Componente indice
HTML:
TS:
Componente modal1
HTML:
TS:
Componente modal2
HTML:
TS:
Componente modal3
HTML:
TS:
Abbiamo stampato i loro nomi sul costruttore per 3 modali.
Modal1 e modal2 sono entrambi caricati dinamicamente, solo quando si preme il pulsante per caricare, verrà attivato il costruttore di esecuzione, modal3 non utilizza il caricamento dinamico; dopo il caricamento dell'interfaccia genitore, il costruttore di interfaccia modal3 verrà eseguito immediatamente.
In questo modo, puoi vedere i vantaggi del caricamento dinamico, e non si caricherà se non lo usi, simile al caricamento pigro in C#.
Scarica codice sorgente:
Turisti, se volete vedere il contenuto nascosto di questo post, vi prego Risposta
Risorse:Il login del link ipertestuale è visibile.
|
Pubblicato su 29/05/2020 16:40:00
|
|
|
|
Padrone di casa|
Pubblicato su 24/07/2020 17:52:58
|
Pubblicato su 26/10/2022 17:27:19
|
