Barres den-tête dynamiques et / ou contenu pour votre Ivy Angular Application

(Nasreddine Skandrani) (24 juin 2020)

Vous devrez peut-être avoir des barres den-tête et / ou des contenus différents par exemple pour différents types dutilisateurs. Voyons comment procéder.

Remarque:
Si vous nêtes pas avec Angular Ivy (angulaire 8 et ci-dessous). Vous pouvez jeter un œil à
mon message dans ce numéro de github où jai ajouté une bonne démonstration de lien vers vous aider à charger manuellement paresseusement un module dans les anciennes versions angulaires.
Si vous êtes avec Ivy activé, continuez simplement à lire larticle une solution est présentée.

Scénario 1: barres den-tête dynamiques avec même contenu

Solution 1

Consultez la démo en ligne pour cette solution 1.

Dans cette solution 1, nous utilisons un router-outlet nommé pour gérer le header bar. Malheureusement, le chargement paresseux avec loadChildren et nommé router-outlet a un bug dans Angular en ce moment.

Problème de bug Github -> https://github.com/angular/angular/issues/12842

Cette démo se termine par cette erreur dans le journal:

Donc pour linstant cette solution 1 avec `loadChildren` ne fonctionne pas mais cela pourrait un jour.

Solution 2

Consultez la démo en ligne pour cette solution 2.

Dans cette solution 2, nous utilisons cet article . Nous acheminons donc vers un HeaderbarSelectorComponent puis nous chargeons paresseusement le bon module avec un conditionnel standard depuis lintérieur de ce composant.

Dans la démo2, vous pouvez basculer le 2 headerbars en utilisant le bouton toggle user type dans le corps de la page puis en rechargeant la page.

❤️ Cette solution fonctionne parfaitement comme vous pouvez le voir dans la démo. ❤️

Scénario 2: barres den-tête dynamiques avec contenu dynamique

Appliquer la même stratégie comme scénario1 / solution2 pour le chargement de contenu dynamique.

Vous avez trouvé ce message utile! donnez-lui un peu 👏👏👏 .
Merci

référencé: 18093 12088 12842

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *