Composition ou héritage
Privilégiez la composition pour partager un comportement
Composition ou héritage est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Deux stratégies de réutilisation
Pour partager un comportement entre des composants, vous pouvez utiliser l’héritage (étendre une classe de base) ou la composition (combiner de petits éléments). L’API de composition d’Angular en fait le choix privilégié par défaut.
Récapitulatif de l’héritage
Avec l’héritage, un composant étend un composant ou une directive de base et réutilise ses entrées, ses sorties et sa logique.
export class FancyButton extends BaseButton {
// inherits BaseButton members
}Limites de l’héritage
Une classe ne peut étendre qu’une seule classe de base. Les hiérarchies profondes deviennent rigides, et vous héritez de tout, y compris des éléments dont vous ne voulez pas.
Le problème du diamant
Il est impossible de combiner plusieurs comportements par héritage sans créer des chaînes complexes. La composition contourne ce problème en appliquant plusieurs directives indépendamment.
Récapitulatif de la composition
Avec la composition, un composant reste ciblé et intègre des comportements via hostDirectives, en en combinant autant que nécessaire.
hostDirectives: [ElevateDirective, RippleDirective, FocusTrapDirective]Privilégier la composition
Le conseil « privilégier la composition à l’héritage » s’applique particulièrement à Angular : la composition est flexible, additive et évite les classes de base fragiles.
Quand l’héritage reste pertinent
L’héritage peut convenir pour une classe de base unique et stable, partagée par des variantes proches, par exemple un champ de formulaire de base que les variantes spécialisent. Gardez les hiérarchies peu profondes.
Combiner les deux approches
Vous pouvez combiner les approches : étendre une classe de base légère pour partager la structure, tout en composant des comportements pour les préoccupations transversales.
Encapsulation
La composition garde les éléments internes de chaque comportement privés et n’expose que les entrées et sorties choisies, tandis que l’héritage expose toute l’API de la classe de base.
Refactoriser vers la composition
Lorsqu’une classe de base accumule des responsabilités sans rapport, séparez chacune d’elles dans une directive et composez-les. Le résultat est plus modulaire et plus facile à évaluer.
Guide de décision
Besoin de plusieurs comportements indépendants ? Composez-les. Besoin d’une seule fondation structurelle partagée ? Une classe de base peu profonde peut convenir. Par défaut, privilégiez la composition pour sa flexibilité.
Vérification rapide
Évaluez votre compréhension de la composition et de l’héritage.
Récapitulatif
Vous avez appris que la composition (combiner des comportements ciblés via hostDirectives) est plus flexible que l’héritage (une seule classe de base), qu’elle évite les hiérarchies fragiles et qu’elle doit être privilégiée par défaut, l’héritage peu profond étant réservé à la structure partagée.
Questions Fréquemment Posées
La leçon « Composition ou héritage » est-elle gratuite ?
Oui — le texte complet de « Composition ou héritage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composition ou héritage » ?
Privilégiez la composition pour partager un comportement Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Composition ou héritage » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La propriété hostDirectives
- Exposer les entrées et les sorties
- Créer des comportements réutilisables
- Composition ou héritage