Direktivat strukturore (ato me *, si *ngIf/*ngFor) ndryshojnë DOM-in duke . është sheqer sintaksore — nën kapën, Angular mbështjell elementin në dhe direktiva kontrollon nëse dhe si ai template renderohet.
Direktivat strukturore (ato me *, si *ngIf/*ngFor) ndryshojnë DOM-in duke . është sheqer sintaksore — nën kapën, Angular mbështjell elementin në dhe direktiva kontrollon nëse dhe si ai template renderohet.
*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* i thotë Angular-ut: "mbështjell këtë element në një template, dhe lejo direktivën të vendosë kur ta vendosë atë në DOM." <ng-template> është një pjesë inerte e markup që nuk renderohet derisa një direktive ta instantifikojë atë.
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>
Dy pjesët e injektuar janë çelësi: TemplateRef është template i elementit ("çfarë të renderohet"), dhe ViewContainerRef është vendndodhja në DOM ("ku"). Direktiva thërret createEmbeddedView për të shtuar elementin ose clear për ta hequr atë.
<!-- 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> }
Kjo sintaksë më e re është më e lexueshme dhe më performante, megjithëse koncepti themelor i shtimit/heqjes është i njëjtë.
Kuptuesi i desugaring-ut * → <ng-template> sqaron se si *ngIf/*ngFor shtohen dhe hiqen nga DOM, dhe ju lejon të ndërtoni direktiva strukturore të personalizuara (duke përdorur TemplateRef + ViewContainerRef) për kontrollin e avancuar të template-ave — p.sh. renderimi bazuar në lejet, përsëritës të personalizuar, ose stampim dembel.
Ai gjithashtu sqaron pse nuk mund të vendosni dy direktiva strukturore (*ngIf dhe *ngFor) në një element: secila kërkon mbështjelljen e vet të template-it.