Dynamiske topptekster og / eller innhold for Ivy Angular App

(Nasreddine Skandrani) (24. juni 2020)

Det kan hende du må ha forskjellige overskriftslinjer og / eller innhold, for eksempel for forskjellige typer brukere. La oss sjekke hvordan du gjør det.

Merk:
Hvis du ikke er med Angular Ivy (vinkel 8 og under). Du kan ta en titt på
innlegget mitt i dette github-nummeret der jeg la til en god linkdemo til hjelper deg med å laste manuelt en modul i gamle vinkelversjoner.
Hvis du har Ivy aktivert, er det bare å fortsette å lese artikkelen en løsning blir presentert.

Scenario 1: dynamiske topptekster samme innhold

Løsning 1

Sjekk den online demo for denne løsningen 1.

I denne løsningen 1 bruker vi en navngitt router-outlet for å håndtere header bar. Dessverre har den dovne belastningen med loadChildren og navnet router-outlet en feil i Angular akkurat nå.

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

Denne demoen ender med denne feilen i loggen:

Så foreløpig fungerer denne løsningen 1 med `loadChildren` ikke, men det kan en dag.

Løsning 2

Sjekk online demo for denne løsningen 2.

I denne løsningen 2 bruker vi denne artikkelen . Så vi ruter til en HeaderbarSelectorComponent, og deretter la vi lat den rette modulen med en standard betinget fra innsiden av denne komponenten.

I demo2 kan du veksle 2 headerbars ved å bruke knappen toggle user type på siden av siden og deretter laste siden inn på nytt.

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

Scenario 2: dynamiske topptekster med dynamisk innhold

Bruk samme strategi som scenario1 / løsning2 for dynamisk innholdsbelastning.

Du syntes dette innlegget var nyttig! gi det litt 👏👏👏 .
Takk

referert: 18093 12088 12842

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *