Angular Academy · Lección

Hooks AfterView y AfterContent

Ejecute lógica después de inicializar la vista y el contenido.

Hooks AfterView y AfterContent es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Vista frente a contenido

Angular distingue entre la vista de un componente (su propia plantilla) y el contenido proyectado en él mediante ng-content. Para cada uno se ejecutan hooks diferentes.

AfterViewInit

El hook AfterViewInit se ejecuta una vez que la vista del componente y sus vistas secundarias se han inicializado por completo. Es el momento adecuado para acceder a los elementos secundarios de la vista.

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

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

Acceder a ViewChild

Una referencia @ViewChild a un elemento de la plantilla está disponible de forma fiable en ngAfterViewInit, no antes.

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

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

AfterViewChecked

El hook AfterViewChecked se ejecuta después de cada comprobación de la vista del componente. Se activa con frecuencia, por lo que su trabajo debe ser mínimo.

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

AfterContentInit

El hook AfterContentInit se ejecuta una vez que se ha inicializado el contenido proyectado con ng-content.

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

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

Acceder a ContentChild

Use @ContentChild para consultar el contenido proyectado. La referencia está disponible en ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

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

AfterContentChecked

El hook AfterContentChecked se ejecuta después de cada comprobación del contenido proyectado. Al igual que el hook de comprobación de la vista, se activa con frecuencia.

Orden completo de los hooks

Para un componente con entradas y contenido, el orden es: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

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

El error ExpressionChangedAfterChecked

Cambiar datos enlazados dentro de ngAfterViewInit puede activar el famoso error ExpressionChangedAfterItHasBeenCheckedError. Aplace esas actualizaciones para evitarlo.

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

Usar ViewChildren

@ViewChildren devuelve una QueryList con varios elementos o componentes coincidentes, disponible en ngAfterViewInit.

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

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

Elegir el hook adecuado

Use los hooks AfterView para su propia plantilla y los hooks AfterContent para el contenido proyectado. Prefiera las variantes Init para la configuración que se realiza una sola vez y las variantes Checked solo cuando sea necesario.

Comprobación rápida

Compruebe su comprensión de los hooks after-view y after-content.

Resumen

Los hooks AfterContent se ejecutan para el contenido proyectado y los hooks AfterView para la vista propia del componente. Las variantes Init se ejecutan una vez; las variantes Checked se ejecutan en cada ciclo. Úselos para acceder de forma segura a @ViewChild y @ContentChild.

Preguntas frecuentes

¿La lección «Hooks AfterView y AfterContent» es gratis?

Sí — el texto completo de «Hooks AfterView y AfterContent» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Hooks AfterView y AfterContent»?

Ejecute lógica después de inicializar la vista y el contenido. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Hooks AfterView y AfterContent»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy