Expondo entradas e saídas
Disponibilize as entradas e saídas da diretiva hospedeira.
Expondo entradas e saídas é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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.
Expondo APIs compostas
Quando você compõe uma diretiva por meio de hostDirectives, suas entradas e saídas ficam ocultas por padrão. A API de composição permite expor entradas e saídas selecionadas na API pública do hospedeiro.
A forma de objeto
Em vez de listar apenas a classe, use um objeto com matrizes directive, inputs e outputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Expondo uma entrada
Listar o nome de uma entrada em inputs permite que consumidores a vinculem no elemento hospedeiro.
<app-button tooltipText="Save changes"></app-button>Expondo uma saída
Listar uma saída faz com que o hospedeiro reemita os eventos dessa diretiva.
<app-button (tooltipShown)="onShown()"></app-button>Renomeando durante a exposição
Use o formato publicName: internalName para renomear uma entrada ou saída ao expô-la.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Renomeando saídas
As saídas são renomeadas da mesma forma.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Por que ocultar por padrão?
Ocultar entradas e saídas compostas mantém a API do hospedeiro intencional. Exponha somente o que fizer sentido para os consumidores, evitando revelar detalhes internos da diretiva.
Combinando com entradas próprias
O hospedeiro pode ter suas próprias entradas junto com as expostas; o Angular as combina em uma única API pública no elemento.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Conflitos de nomes
Se o nome de uma entrada exposta entrar em conflito com uma entrada própria do hospedeiro, renomeá-la evita o conflito e esclarece a intenção.
Vinculações bidirecionais
Para oferecer uma vinculação bidirecional por meio da composição, exponha tanto a entrada quanto a saída Change correspondente, usando nomes consistentes.
Boa prática
Exponha a superfície mínima e bem nomeada de que os consumidores precisam. Renomeie os nomes internos para se adequarem ao vocabulário do seu componente, não ao da diretiva subjacente.
Verificação rápida
Teste sua compreensão sobre a exposição de entradas e saídas.
Recapitulação
Você aprendeu que a forma de objeto de hostDirectives expõe inputs e outputs selecionados na API do hospedeiro, com a opção de renomeá-los usando publicName: internalName, mantendo a superfície pública intencional.
Perguntas Frequentes
A aula “Expondo entradas e saídas” é grátis?
Sim — o texto completo de “Expondo entradas e saídas” é 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 “Expondo entradas e saídas”?
Disponibilize as entradas e saídas da diretiva hospedeira. 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 2 de 4.
Quanto tempo leva a aula “Expondo entradas e saídas”?
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