Barre di intestazione dinamiche e / o contenuti per Ivy Angular App

(Nasreddine Skandrani) (24 giugno 2020)

Potrebbe essere necessario avere barre di intestazione e / o contenuti diversi, ad esempio, per diversi tipi di utenti. Vediamo come farlo.

Nota:
se non sei con Angular Ivy (angolare 8 e inferiore). Puoi dare unocchiata al
il mio post in questo numero di GitHub dove ho aggiunto un buon link demo a aiutarti a caricare manualmente un modulo nelle vecchie versioni angolari.
Se sei con Ivy abilitato, continua a leggere larticolo e viene presentata una soluzione.

Scenario 1: barre di intestazione dinamiche con stesso contenuto

Soluzione 1

Controlla la demo online per questa soluzione 1.

In questa soluzione 1, utilizziamo un router-outlet per gestire header bar. Purtroppo il caricamento lento con loadChildren e denominato router-outlet ha un bug in Angular in questo momento.

Problema con Github bug -> https://github.com/angular/angular/issues/12842

Questa demo finisce con questo errore nel registro:

Quindi per ora questa soluzione 1 con `loadChildren` non funziona ma potrebbe un giorno.

Soluzione 2

Controlla la demo online per questa soluzione 2.

In questa soluzione 2, utilizziamo questo articolo . Quindi indirizziamo a un HeaderbarSelectorComponent e quindi cariciamo lentamente il modulo giusto con un condizionale standard dallinterno di questo componente.

Nella demo2, puoi attivare o disattivare 2 headerbars utilizzando il pulsante toggle user type nel corpo della pagina, quindi ricaricando la pagina.

❤️ Questa soluzione funziona perfettamente come puoi vedere nella demo. ❤️

Scenario 2: barre di intestazione dinamiche con contenuti dinamici

Applica la stessa strategia come scenario1 / soluzione2 per il caricamento del contenuto dinamico.

Hai trovato utile questo post! dagli un po 👏👏👏 .
Grazie

referenziato: 18093 12088 12842

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *