Angular Academy · Aula

Composição versus herança

Prefira a composição para compartilhar comportamentos.

Aula 4 de 413 etapas

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.

Grátis para começar

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

  1. A propriedade hostDirectives
  2. Expondo entradas e saídas
  3. Criando comportamentos reutilizáveis
  4. Composição versus herança
← Voltar para Angular Academy