Angular Academy · Aula

Projeção em vários espaços com select

Projete conteúdo em espaços nomeados.

Projeção em vários espaços com select é 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.

Vários slots

Muitos componentes precisam de várias regiões: um cabeçalho, um corpo e um rodapé. O Angular oferece suporte a isso com a projeção em vários slots, usando o atributo select em <ng-content>.

O atributo select

select aceita um seletor CSS. Cada <ng-content select="..."> projeta apenas os nós correspondentes a esse seletor.

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

Selecionando por atributo

Os seletores de atributos são o padrão mais comum porque ficam claros na marcação do consumidor.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

Consumindo slots nomeados

O consumidor marca cada parte do conteúdo com o atributo correspondente.

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

Selecionando por elemento ou classe

Você também pode selecionar por nome de elemento ou classe CSS.

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

O slot abrangente

Um <ng-content> sem select captura tudo o que não correspondeu a um slot nomeado. Coloque-o por último como alternativa.

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

A ordem é importante

O Angular avalia os slots na ordem do modelo. Cada nó projetado vai para o primeiro slot correspondente. Coloque o slot abrangente depois dos seletores específicos para que ele não capture tudo.

Combinando seletores

Os seletores CSS podem ser combinados; por exemplo, select="button[primary]" seleciona um elemento de botão com um atributo primary.

<ng-content select="button[primary]"></ng-content>

Um componente de layout

Aqui está um cartão com slots para cabeçalho, corpo e rodapé, além de um slot abrangente.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

Cada nó é projetado uma vez

Um determinado nó projetado corresponde a apenas um slot e é renderizado exatamente uma vez. Não é possível clonar o mesmo nó em dois slots por meio da projeção.

Estilização por slot

Como cada slot fica em um local distinto do DOM, você pode envolver os slots em contêineres estilizados (cabeçalho/rodapé) para dar a cada região uma aparência própria.

Verificação rápida

Teste seu conhecimento sobre projeção em vários slots.

Recapitulação

Você aprendeu a criar componentes de vários slots com <ng-content select="...">. Os seletores podem direcionar atributos, elementos ou classes; um slot sem seleção é o slot abrangente; e a ordem determina qual slot vence.

Perguntas Frequentes

A aula “Projeção em vários espaços com select” é grátis?

Sim — o texto completo de “Projeção em vários espaços com select” é 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 “Projeção em vários espaços com select”?

Projete conteúdo em espaços nomeados. 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 “Projeção em vários espaços com select”?

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

← Voltar para Angular Academy