Composição versus herança
Prefira a composição para compartilhar comportamentos.
Composição versus herança é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Duas estratégias de reutilização
Para compartilhar comportamentos entre componentes, você pode usar herança (estender uma classe base) ou composição (combinar partes menores). A API de composição do Angular torna a composição a opção padrão preferida.
Recapitulação da herança
Com a herança, um componente estende um componente ou uma diretiva base e reutiliza suas entradas, saídas e lógica.
export class FancyButton extends BaseButton {
// inherits BaseButton members
}Limitações da herança
Uma classe pode estender apenas uma base. Hierarquias profundas se tornam rígidas, e você herda tudo, inclusive as partes que não deseja.
O problema do diamante
Combinar vários comportamentos por meio de herança é impossível sem cadeias complicadas. A composição contorna isso aplicando várias diretivas de forma independente.
Recapitulação da composição
Com a composição, um componente permanece focado e incorpora comportamentos por meio de hostDirectives, combinando quantos forem necessários.
hostDirectives: [ElevateDirective, RippleDirective, FocusTrapDirective]Prefira a composição
A orientação “prefira a composição à herança” se aplica fortemente ao Angular: a composição é flexível, incremental e evita classes base frágeis.
Quando a herança ainda é adequada
A herança pode ser adequada para uma única base estável compartilhada por variantes próximas, como um campo de formulário base que as variantes especializam. Mantenha as hierarquias rasas.
Combinando ambas
Você pode combinar as abordagens: estenda uma base fina para compartilhar a estrutura e componha comportamentos para preocupações transversais.
Encapsulamento
A composição mantém os detalhes internos de cada comportamento privados e expõe apenas as entradas e saídas escolhidas, enquanto a herança expõe toda a API da base.
Refatorando rumo à composição
Quando uma classe base acumular responsabilidades não relacionadas, divida cada uma em uma diretiva e componha-as. O resultado será mais modular e testável.
Guia de decisão
Precisa de vários comportamentos independentes? Componha. Precisa de uma única base estrutural compartilhada? Uma base rasa pode ser suficiente. Por padrão, prefira a composição para obter flexibilidade.
Verificação rápida
Teste sua compreensão sobre composição e herança.
Recapitulação
Você aprendeu que a composição (combinar comportamentos focados por meio de hostDirectives) é mais flexível que a herança (uma única classe base), evita hierarquias frágeis e deve ser a opção padrão, reservando a herança rasa para estruturas compartilhadas.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Composição versus herança” é grátis?
Sim — o texto completo de “Composição versus herança” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Composição versus herança”?
Prefira a composição para compartilhar comportamentos. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Composição versus herança”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A propriedade hostDirectives
- Expondo entradas e saídas
- Criando comportamentos reutilizáveis
- Composição versus herança