Angular Academy · Les

AfterView- en AfterContent-hooks

Voer logica uit na de initialisatie van view en content.

Les 4 van 413 stappen

AfterView- en AfterContent-hooks is een gratis Angular Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Weergave versus inhoud

Angular maakt onderscheid tussen de weergave van een component (de eigen template) en de inhoud die via ng-content in de component wordt geprojecteerd. Voor elk daarvan worden afzonderlijke hooks uitgevoerd.

AfterViewInit

De AfterViewInit-hook wordt één keer uitgevoerd nadat de weergave van de component en de weergaven van de onderliggende componenten volledig zijn geïnitialiseerd. Dit is het juiste moment om onderliggende elementen in de weergave te benaderen.

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

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

ViewChild benaderen

Een @ViewChild-verwijzing naar een element uit de template is betrouwbaar beschikbaar in ngAfterViewInit, en niet eerder.

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

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

AfterViewChecked

De AfterViewChecked-hook wordt uitgevoerd na elke controle van de weergave van de component. Deze wordt vaak geactiveerd, dus houd de bewerkingen erin minimaal.

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

AfterContentInit

De AfterContentInit-hook wordt één keer uitgevoerd nadat de inhoud die met ng-content is geprojecteerd, is geïnitialiseerd.

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

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

ContentChild benaderen

Gebruik @ContentChild om geprojecteerde inhoud op te vragen. De verwijzing is beschikbaar in ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

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

AfterContentChecked

De AfterContentChecked-hook wordt uitgevoerd na elke controle van de geprojecteerde inhoud. Net als de hook voor gecontroleerde weergave wordt deze vaak geactiveerd.

Volledige volgorde van hooks

Voor een component met invoer en inhoud is de volgorde: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

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

De ExpressionChangedAfterChecked-fout

Als u gebonden gegevens binnen ngAfterViewInit wijzigt, kan de bekende ExpressionChangedAfterItHasBeenCheckedError optreden. Stel zulke updates uit om deze fout te voorkomen.

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

ViewChildren gebruiken

@ViewChildren retourneert een QueryList met meerdere overeenkomende elementen of componenten, die beschikbaar is in ngAfterViewInit.

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

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

De juiste hook kiezen

Gebruik de AfterView-hooks voor uw eigen template en de AfterContent-hooks voor geprojecteerde inhoud. Geef de Init-varianten de voorkeur voor eenmalige initialisatie en gebruik de Checked-varianten alleen wanneer dat nodig is.

Korte controle

Test uw begrip van de hooks voor weergave en inhoud.

Beantwoord dit in de interactieve les

Samenvatting

De AfterContent-hooks worden uitgevoerd voor geprojecteerde inhoud en de AfterView-hooks voor de eigen weergave van de component. Init-varianten worden één keer uitgevoerd; Checked-varianten worden in elke cyclus uitgevoerd. Gebruik ze om @ViewChild en @ContentChild veilig te benaderen.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “AfterView- en AfterContent-hooks” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “AfterView- en AfterContent-hooks”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “AfterView- en AfterContent-hooks”?

Voer logica uit na de initialisatie van view en content. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “AfterView- en AfterContent-hooks”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy