Routage dynamique angulaire
À ce stade, vous avez peut-être déjà entendu parler des composants dynamiques qui sont très utiles pour créer des applications plus dynamiques. Ils nous permettent de charger dynamiquement des composants au moment de l'exécution en fonction d'une logique personnalisée sans avoir à créer un composant gonflé avec des charges de ngIf.
Si vous n'avez pas encore entendu parler des composants dynamiques, je vous suggère de regarder cette conférence de Shmuela Jacobs à Angular Connect :
Dans mon travail quotidien, je construis un système qui ressemble à un CRM gérant différents produits qui ont tous un noyau commun, mais aussi des éléments spécifiques au produit. Afin de rendre les composants plus réutilisables, j'ai introduit ici et là des composants dynamiques qui chargent le bon composant spécifique au produit en fonction d'un InjectionToken qui spécifie le produit actif actuel. Tout allait bien, jusqu'à ce que j'essaie de refactoriser un flux par étapes qui comporte des étapes communes, mais aussi des étapes spécifiques au produit. C'était un problème car le flux par étapes n'est pas seulement basé sur les composants, mais dépend également des routes. Cela signifie que le flux par étapes d'un produit peut avoir des étapes supplémentaires, c'est-à-dire des itinéraires, qui sont différents des autres. Le nombre d'étapes peut également varier.
Une solution de contournement consisterait à créer un nombre fixe de routes nommées : step1, step2, step3, puis à charger dynamiquement le composant à chaque étape, mais comme le nombre d'étapes varie, ce n'est pas possible. La bonne solution est d'utiliser le routage dynamique .
Habituellement, nous définissons les routes d'un module de manière très statique dans un module de routage comme celui-ci :
Une fois le module chargé, aucune logique ne peut interférer avec l'affectation statique des routes, il y aura donc toujours la route d'accueil et rien d'autre.
Exemple
Regardons un exemple très simplifié qui n'a peut-être pas beaucoup de sens mais qui a pour but de démontrer comment fonctionne le routage dynamique :
Nous souhaitons créer une application avec les routes suivantes :
- Accueil (statique)
- 404 Non trouvé (statique)
- Jour (dynamique ; uniquement disponible entre 6 h 00 et 18 h 00)
- Nuit (dynamique ; uniquement disponible entre 18 h 00 et 6 h 00)
- Secret (dynamique ; 50/50 chance)
Maintenant que nous définissons nos routes dans la section des fournisseurs, nous pouvons utiliser l' objet de définition de fournisseur useFactory . De cette façon, nous pouvons transmettre une usine contenant la logique qui décide de l'apparence des itinéraires.
Petit rappel : Si vous avez chargé le module à 5h59 et attendu jusqu'à 6h01, la route du jour ne sera pas disponible car la configuration de la route a déjà été faite auparavant. Cela signifie que la logique définissant les routes ne se produit qu'une seule fois lorsque le module est chargé.
Conclusion
J'espère pouvoir vous montrer quelque chose de nouveau et d'intéressant. Si vous êtes intéressé par Angular, consultez mes autres articles de blog sur Medium.
L'exemple complet est disponible sur mon GitHub :
Suggested posts
Learning at Work Week compte plus que vous ne le pensez
Nous avons souvent du mal à mettre en œuvre ce que nous savons être bon pour nous. Qu'il s'agisse de dire à un proche que nous l'aimons ou de se rappeler de parler comme un pirate, il y aura toujours ceux qui prétendent qu'un jour, une semaine ou un mois d'événements ne sont pas nécessaires parce qu'ils font déjà ces choses.
Réseau TV Twitter
Ce qui est vieux est à nouveau nouveau et ce qui était autrefois la chose brillante et scintillante semble maintenant terne. Je ne parle pas du retour des jeans JNCO parmi les enfants cool du centre-ville avec d'autres modes de la fin des années 1990.
Related posts
L'érosion lente : dévoiler les façons dont les gens perdent leur carrière
Dans le monde rapide et compétitif d'aujourd'hui, la carrière d'une personne joue un rôle important dans la croissance personnelle, la stabilité financière et la satisfaction globale de la vie. Cependant, de nombreuses personnes se retrouvent prises dans un cycle incessant de stagnation et d'insatisfaction, dépérissant progressivement dans leur vie professionnelle.
Comment sauver la planète et gagner de l'argent
Combien de fois avez-vous jeté une bouteille en plastique, un bocal en verre, une canette en aluminium ou un paquet d'énergie verte sans réfléchir à deux fois ? Combien de fois avez-vous souhaité pouvoir obtenir quelque chose en échange de leur recyclage ? Si vous êtes comme la plupart des gens, la réponse est probablement plusieurs fois. Le recyclage est souvent perçu comme un tracas, une corvée ou un devoir qui n'apporte aucun bénéfice immédiat ou tangible.
Le mensonge du cow-boy
Comment les mégacorporations ont vendu aux Américains un mensonge costaud
C'est un matin brillamment doré dans les collines de l'ouest, alors que les premiers rayons du soleil illuminent l'herbe givrée des plaines. Un troupeau de bovins Angus placides, d'un noir de jais et massif, se découpe sur le lever du soleil alors qu'ils descendent un sentier battu vers un lieu qu'ils connaissent tous bien; le bar du petit-déjeuner.