Dynamiske headerstænger og / eller indhold til din Ivy Angular App

(Nasreddine Skandrani) (24. juni 2020)

Du skal muligvis have forskellige overskriftsbjælker og / eller indhold, f.eks. for forskellige typer brugere. Lad os kontrollere, hvordan vi gør det.

Bemærk:
Hvis du ikke er med Angular Ivy (kantet 8 og derunder). Du kan se på
mit indlæg i dette github-nummer hvor jeg tilføjede en god linkdemo til hjælpe dig med manuel dovne indlæsning af et modul i gamle vinkelversioner.
Hvis du er med Ivy aktiveret, skal du bare fortsætte med at læse artiklen, og der vises en løsning.

Scenarie 1: dynamiske headerbjælker med samme indhold

Løsning 1

Se online demo for denne løsning 1.

I denne løsning 1 bruger vi en navngivet router-outlet til at håndtere header bar. Desværre har den dovne belastning med loadChildren og navngivet router-stikkontakt en fejl i Angular lige nu.

Fejl med Github-fejl -> https://github.com/angular/angular/issues/12842

Denne demo ender med denne fejl i loggen:

Så indtil videre fungerer denne løsning 1 med `loadChildren` ikke, men det kan en dag.

Løsning 2

Tjek online demo for denne løsning 2.

I denne løsning 2 bruger vi denne artikel . Så vi ruter til en HeaderbarSelectorComponent, og så laver vi doven det rigtige modul med en standardbetinget inde fra denne komponent.

I demo2 kan du skifte mellem 2 headerbars ved hjælp af knappen toggle user type i sidens brødtekst og derefter genindlæser siden.

❤️ Denne løsning fungerer perfekt som du kan se i demoen. ❤️

Scenarie 2: dynamiske headerbjælker med dynamisk indhold

Anvend samme strategi som scenario1 / løsning2 til dynamisk indholdsindlæsning.

Du fandt dette indlæg nyttigt! Giv det noget 👏👏👏 .
Tak

henvist til: 18093 12088 12842

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *