Angular Academy · Aula

Ganchos AfterView e AfterContent

Execute lógica após a inicialização da visualização e do conteúdo.

Ganchos AfterView e AfterContent é 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.

Visualização versus conteúdo

O Angular distingue a visualização de um componente (seu próprio modelo) do conteúdo projetado nele por meio de ng-content. Ganchos separados são acionados para cada um.

AfterViewInit

O gancho AfterViewInit é executado uma vez depois que a visualização do componente e suas visualizações filhas são totalmente inicializadas. Esse é o momento adequado para acessar os filhos da visualização.

import { AfterViewInit } from "@angular/core";

export class DemoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log("view ready");
  }
}

Acessando ViewChild

Uma referência @ViewChild a um elemento do modelo fica disponível de forma confiável em ngAfterViewInit, e não antes.

@ViewChild("input") input!: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

AfterViewChecked

O gancho AfterViewChecked é executado depois de cada verificação da visualização do componente. Ele é acionado com frequência, portanto mantenha seu trabalho mínimo.

ngAfterViewChecked() {
  // runs after each view check
}

AfterContentInit

O gancho AfterContentInit é executado uma vez depois que o conteúdo projetado com ng-content é inicializado.

import { AfterContentInit } from "@angular/core";

export class CardComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log("projected content ready");
  }
}

Acessando ContentChild

Use @ContentChild para consultar o conteúdo projetado. A referência fica disponível em ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

ngAfterContentInit() {
  console.log(this.header);
}

AfterContentChecked

O gancho AfterContentChecked é executado depois de cada verificação do conteúdo projetado. Assim como o gancho de verificação da visualização, ele é acionado com frequência.

Ordem completa dos ganchos

Para um componente com entradas e conteúdo, a ordem é: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewChecked

O erro ExpressionChangedAfterChecked

Alterar dados vinculados dentro de ngAfterViewInit pode acionar o famoso ExpressionChangedAfterItHasBeenCheckedError. Adie essas atualizações para evitá-lo.

ngAfterViewInit() {
  // defer to next tick to avoid the error
  setTimeout(() => this.ready = true);
}

Usando ViewChildren

@ViewChildren retorna uma QueryList de vários elementos ou componentes correspondentes, pronta em ngAfterViewInit.

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

ngAfterViewInit() {
  console.log(this.items.length);
}

Escolhendo o gancho adequado

Use os ganchos AfterView para seu próprio modelo e os ganchos AfterContent para conteúdo projetado. Prefira as variantes Init para configurações executadas uma única vez e as variantes Checked somente quando necessário.

Verificação rápida

Teste sua compreensão dos ganchos de visualização posterior e conteúdo posterior.

Recapitulação

Os ganchos AfterContent são acionados para conteúdo projetado, e os ganchos AfterView, para a própria visualização do componente. As variantes Init são executadas uma vez; as variantes Checked, em todos os ciclos. Use-as para acessar @ViewChild e @ContentChild com segurança.

Perguntas Frequentes

A aula “Ganchos AfterView e AfterContent” é grátis?

Sim — o texto completo de “Ganchos AfterView e AfterContent” é 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 “Ganchos AfterView e AfterContent”?

Execute lógica após a inicialização da visualização e do conteúdo. 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 “Ganchos AfterView e AfterContent”?

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