Structurele richtlijnen (degene met *, zoals *ngIf/) veranderen de DOM door . De is syntactische suiker — onder de motorkap verpakt Angular het element in een en bepaalt de richtlijn of/hoe dat sjabloon in de DOM wordt weergegeven.
Structurele richtlijnen (degene met *, zoals *ngIf/) veranderen de DOM door . De is syntactische suiker — onder de motorkap verpakt Angular het element in een en bepaalt de richtlijn of/hoe dat sjabloon in de DOM wordt weergegeven.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
De * vertelt Angular: "verpak dit element in een sjabloon, en laat de richtlijn bepalen wanneer het in de DOM moet worden geplaatst." Een <ng-template> is een inert stuk opmaak dat niet wordt weergegeven totdat een richtlijn het instantieert.
import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({ selector: "[appUnless]" }) // *appUnless = "the opposite of ngIf"
export class UnlessDirective {
constructor(
private templateRef: TemplateRef<any>, // the wrapped <ng-template>
private viewContainer: ViewContainerRef, // where to render it
) {}
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.viewContainer.createEmbeddedView(this.templateRef); // render it
} else {
this.viewContainer.clear(); // remove it
}
}
}
// usage: <p *appUnless="isHidden">Shown when isHidden is false</p>
De twee geïnjecteerde onderdelen zijn essentieel: TemplateRef is het sjabloon van het element (het "wat te renderen"), en ViewContainerRef is de locatie in de DOM (het "waar"). De richtlijn roept createEmbeddedView aan om het element toe te voegen of clear om het te verwijderen.
<!-- newer Angular replaces *ngIf/*ngFor with built-in block syntax -->
@if (isVisible) { <p>Hello</p> } @else { <p>Hidden</p> }
@for (item of items; track item.id) { <li>{{ item.name }}</li> }
Deze nieuwere syntaxis is leesbaarder en performanter, hoewel het onderliggende concept van toevoegen/verwijderen hetzelfde is.
Het begrijpen van de * → <ng-template> desugaring demystificeert hoe *ngIf/*ngFor DOM toevoegt en verwijdert, en stelt u in staat aangepaste structurele richtlijnen (met behulp van TemplateRef + ViewContainerRef) te bouwen voor geavanceerde sjabloonbeheer — bijv. op toestemming gebaseerde weergave, aangepaste herhalers of luie stempeling.
Het verduidelijkt ook waarom u niet twee structurele richtlijnen (*ngIf en *ngFor) op één element kunt plaatsen: elk heeft zijn eigen sjabloonwrapper nodig.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren