Directivele structurale (cele cu *, cum ar fi *ngIf/) modifică DOM-ul prin . este zahăr sintactic — sub capotă, Angular înfășoară elementul într-un și directiva controlează dacă/cum acel șablon este renderizat.
Directivele structurale (cele cu *, cum ar fi *ngIf/) modifică DOM-ul prin . este zahăr sintactic — sub capotă, Angular înfășoară elementul într-un și directiva controlează dacă/cum acel șablon este renderizat.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* îi spune Angular: "înfășoară acest element într-un șablon și lasă directiva să decidă când să-l plaseze în DOM." Un <ng-template> este o bucată inertă de marcare care nu este renderizată până când o directivă o instantiază.
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>
Cele două bucăți injectate sunt esențiale: TemplateRef este șablonul elementului ("ce să renderizeze"), iar ViewContainerRef este locația în DOM ("unde"). Directiva apelează createEmbeddedView pentru a adăuga elementul sau clear pentru a-l elimina.
<!-- 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> }
Această sintaxă mai nouă este mai ușor de citit și mai performantă, deși conceptul subiacent de adăugare/ștergere este același.
Înțelegerea desaharării * → <ng-template> demistifică modul în care *ngIf/*ngFor adaugă și elimină DOM, și vă permite să construiți directive structurale personalizate (folosind TemplateRef + ViewContainerRef) pentru control avansat al șabloanelor — de exemplu, renderizare bazată pe permisiuni, repetitoare personalizate sau ștergere leneșă.
De asemenea, clarifică de ce nu puteți pune două directive structurale (*ngIf și *ngFor) pe un element: fiecare are nevoie de propria înfășurare a șablonului.