Angular Academy · Lezione

Hook AfterView e AfterContent

Esegua la logica dopo l'inizializzazione della vista e del contenuto.

Lezione 4 di 413 passaggi

Hook AfterView e AfterContent è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

View e content

Angular distingue la view di un componente (il relativo template) dal content proiettato al suo interno tramite ng-content. Per ciascuno vengono eseguiti hook distinti.

AfterViewInit

L'hook AfterViewInit viene eseguito una volta, dopo che la view del componente e le relative view figlie sono state inizializzate completamente. È il momento giusto per accedere agli elementi figli della view.

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

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

Accesso a ViewChild

Un riferimento @ViewChild a un elemento del template è sicuramente disponibile in ngAfterViewInit, non prima.

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

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

AfterViewChecked

L'hook AfterViewChecked viene eseguito dopo ogni verifica della view del componente. Viene attivato spesso, quindi mantenga al minimo il lavoro svolto al suo interno.

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

AfterContentInit

L'hook AfterContentInit viene eseguito una volta, dopo che il content proiettato con ng-content è stato inizializzato.

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

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

Accesso a ContentChild

Usi @ContentChild per interrogare il content proiettato. Il riferimento è disponibile in ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

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

AfterContentChecked

L'hook AfterContentChecked viene eseguito dopo ogni verifica del content proiettato. Come l'hook di verifica della view, viene attivato frequentemente.

Ordine completo degli hook

Per un componente con input e content, l'ordine è: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

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

L'errore ExpressionChangedAfterChecked

La modifica di dati associati all'interno di ngAfterViewInit può attivare il noto errore ExpressionChangedAfterItHasBeenCheckedError. Rimandi questi aggiornamenti per evitarlo.

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

Uso di ViewChildren

@ViewChildren restituisce una QueryList contenente più elementi o componenti corrispondenti, disponibile in ngAfterViewInit.

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

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

Scelta dell'hook corretto

Usi gli hook AfterView per il template del componente e gli hook AfterContent per il content proiettato. Preferisca le varianti Init per la configurazione eseguita una sola volta e le varianti Checked solo quando necessario.

Verifica rapida

Verifichi la Sua comprensione degli hook after-view e after-content.

Rispondi nella lezione interattiva

Riepilogo

Gli hook AfterContent vengono eseguiti per il content proiettato, mentre gli hook AfterView vengono eseguiti per la view propria del componente. Le varianti Init vengono eseguite una volta; le varianti Checked a ogni ciclo. Li usi per accedere in modo sicuro a @ViewChild e @ContentChild.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 38
Lezioni: 144

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Hook AfterView e AfterContent» è gratuita?

Sì — il testo completo di «Hook AfterView e AfterContent» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Hook AfterView e AfterContent»?

Esegua la logica dopo l'inizializzazione della vista e del contenuto. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Hook AfterView e AfterContent»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy