Dynamiska rubrikfält och / eller innehåll för din Ivy Angular App

(Nasreddine Skandrani) (24 juni 2020)

Du kan behöva ha olika rubrikfält och / eller innehåll till exempel för olika typer av användare. Låt oss kontrollera hur man gör det.

Obs:
Om du inte är med Angular Ivy (vinkel 8 och nedan). Du kan titta på
mitt inlägg i detta github-nummer där jag lade till en bra länkdemo till hjälper dig att ladda manuellt manuellt en modul i gamla vinkelversioner.
Om du är aktiverad med Ivy, fortsätt bara läsa artikeln en lösning presenteras.

Scenario 1: dynamiska rubrikfält med samma innehåll

Lösning 1

Kontrollera online demo för denna lösning 1.

I denna lösning 1 använder vi en namngiven router-outlet för att hantera header bar. Tyvärr har den lata laddningen med loadChildren och namnet router-outlet ett fel i Angular just nu.

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

Denna demo hamnar med det här felet i loggen:

Så nu fungerar den här lösningen 1 med `loadChildren` inte men det kan en dag.

Lösning 2

Kontrollera online demo denna lösning 2.

I den här lösningen 2 använder vi den här artikeln . Så vi går till en HeaderbarSelectorComponent och sedan laddar vi lat modulen med en standardvillkor inifrån denna komponent.

I demo2 kan du växla mellan två rubrikfält genom att använda knappen toggle user type i sidans kropp och sedan ladda om sidan.

❤️ Denna lösning fungerar perfekt som du kan se i demo. ❤️

Scenario 2: dynamiska rubrikfält med dynamiskt innehåll

Tillämpa samma strategi som scenario1 / lösning2 för dynamisk innehållsbelastning.

Du tyckte att det här inlägget var till hjälp! ge det lite 👏👏👏 .
Tack

refererad: 18093 12088 12842

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *