Dynamische koptekstbalken en / of inhoud voor uw Ivy Angular App

(Nasreddine Skandrani) (24 jun.2020)

Mogelijk moet u verschillende kopbalken en / of inhoud hebben, bijvoorbeeld voor verschillende typen gebruikers. Laten we eens kijken hoe je het moet doen.

Opmerking:
Als je niet met Angular Ivy bent (hoekig 8 en lager). Je kunt een kijkje nemen naar
mijn bericht in dit github-nummer waar ik een goede linkdemo aan heb toegevoegd helpen u handmatig een module te lui laden in oude hoekige versies.
Als u Ivy heeft ingeschakeld, gaat u gewoon verder met het lezen van het artikel, een oplossing wordt gepresenteerd.

Scenario 1: dynamische kopbalken met zelfde inhoud

Oplossing 1

Bekijk de online demo voor deze oplossing 1.

In deze oplossing 1 gebruiken we de naam router-outlet om de header bar af te handelen. Helaas heeft het luie laden met loadChildren en met de naam router-outlet op dit moment een bug in Angular.

Bug Github-probleem -> https://github.com/angular/angular/issues/12842

Deze demo eindigt met deze fout in het logboek:

Dus voorlopig werkt deze oplossing 1 met `loadChildren` niet, maar het kan ooit gebeuren.

Oplossing 2

Bekijk de online demo voor deze oplossing 2.

In deze oplossing 2 maken we gebruik van dit artikel . Dus we routeren naar een HeaderbarSelectorComponent en dan laden we lui de juiste module met een standaard conditionele van binnenuit deze component.

In de demo2 kun je de 2 headerbars door de knop toggle user type in de body van de pagina te gebruiken en vervolgens de pagina opnieuw te laden.

❤️ Deze oplossing werkt perfect zoals je kunt zien in de demo. ❤️

Scenario 2: dynamische header bars met dynamische inhoud

Pas dezelfde strategie toe als scenario1 / oplossing2 voor het laden van dynamische inhoud.

Je vond dit bericht nuttig! geef het wat 👏👏👏 .
Bedankt

waarnaar wordt verwezen: 18093 12088 12842

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *