Strukturne direktive (one sa *, poput *ngIf/*ngFor) mijenjaju DOM . je sintaksni šećer — ispod haube, Angular umota element u i direktiva kontrolira da li/kako se taj template prikazuje.
Strukturne direktive (one sa *, poput *ngIf/*ngFor) mijenjaju DOM . je sintaksni šećer — ispod haube, Angular umota element u i direktiva kontrolira da li/kako se taj template prikazuje.
*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* govori Angular-u: "umotaj ovaj element u template, i dopusti direktivi da odluči kada ga upisati u DOM." <ng-template> je inertna grupa markup-a koja se ne prikazuje dok je direktiva ne instancira.
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>
Dva injektirana elementa su ključna: TemplateRef je template elementa ("što prikazati"), a ViewContainerRef je lokacija u DOM-u ("gdje"). Direktiva poziva createEmbeddedView da doda element ili clear da ga ukloni.
<!-- 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> }
Ova novija sintaksa je čitljivija i performantnija, iako je temeljni koncept add/remove isti.
Razumijevanje * → <ng-template> desugaring-a pojašnjava kako *ngIf/*ngFor dodaju i uklanjaju DOM, i omogućuje vam da gradite prilagođene strukturne direktive (koristeći TemplateRef + ViewContainerRef) za naprednu kontrolu šablona — npr. renditavanje temeljeno na dozvolama, prilagođene repeater, ili lijenije upisivanje.
Također pojašnjava zašto ne možete staviti dvije strukturne direktive (*ngIf i *ngFor) na jedan element: svaka treba svoju omotu šablona.