Strukturelle direktiver (dem med *, som *ngIf/) ændrer DOM ved . er syntaktisk sukker — under motorhjelmen pakker Angular elementet ind i en og direktivet kontrollerer, om/hvordan denne skabelon skal gengives.
Strukturelle direktiver (dem med *, som *ngIf/) ændrer DOM ved . er syntaktisk sukker — under motorhjelmen pakker Angular elementet ind i en og direktivet kontrollerer, om/hvordan denne skabelon skal gengives.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* fortæller Angular: "pak dette element ind i en skabelon, og lad direktivet afgøre, hvornår det skal stemples ind i DOM." En <ng-template> er et inert stykke markup, der ikke gengives, før et direktiv instantierer det.
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 to injicerede dele er nøglen: TemplateRef er elementets skabelon ("hvad der skal gengives"), og ViewContainerRef er placeringen i DOM ("hvor"). Direktivet kalder createEmbeddedView for at tilføje elementet eller clear for at fjerne det.
<!-- 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> }
Denne nyere syntaks er mere læsbar og performant, selvom det underliggende tilføje/fjerne-koncept er det samme.
Forståelse af * → <ng-template> afsukkeringen afklarer, hvordan *ngIf/*ngFor tilføjer og fjerner DOM, og lader dig opbygge brugerdefinerede strukturelle direktiver (ved hjælp af TemplateRef + ViewContainerRef) til avanceret skablonkontrol — f.eks. tilladelsesbaseret rendering, brugerdefinerede gentagere eller dovnt stemplet.
Det præciserer også, hvorfor du ikke kan placere to strukturelle direktiver (*ngIf og *ngFor) på ét element: hver har brug for sin egen skabelonwrapper.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér