Direttivi strutturali (dawk bi *, bħal *ngIf/) ibdlu l-DOM bl-. L- hija sciruppu sintattiku — taħt l-għotja, Angular tħawwad l-element f' u d-direttiva tikkontrolla jekk/kif dak it-template jiġi renderizzat.
Direttivi strutturali (dawk bi *, bħal *ngIf/) ibdlu l-DOM bl-. L- hija sciruppu sintattiku — taħt l-għotja, Angular tħawwad l-element f' u d-direttiva tikkontrolla jekk/kif dak it-template jiġi renderizzat.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
L-* tgħid lil Angular: "għawwad dan l-element fit-template, u ħalli d-direttiva taqbel meta tixtief fuq il-DOM." <ng-template> huwa biċċa markup inert li ma tiġix renderizzata sal-moment li direttiva ma tinstanzjaħa.
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>
Il-biċċiet injettati huma l-fjus: TemplateRef hija t-template tal-element (il-"x'għal jinkiteb"), u ViewContainerRef hija l-post fil-DOM (il-"fejn"). Id-direttiva tippella createEmbeddedView biex iżżid element jew clear biex tirmoċċ.
<!-- 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> }
Di s-sintassi l-ġdida hija aktar leġġibla u performanti, għalkemm il-kunċett fundamentali ta' iżjied/rimoċċ hwa l-istess.
Fhem id-desugaring * → <ng-template> jispjega kif *ngIf/*ngFor iżżidu u jirmoċċu l-DOM, u jippermettilek tibni direttivi strutturali custom (bl-użu ta' TemplateRef + ViewContainerRef) għall-kontroll avanzat tat-template — pereżempju, rendering ibbażat fuq permissi, repetitori custom, jew stemping lazy.
Iddeħlaq ukoll għaliex ma tistax tpoġġi żewġ direttivi strutturali (*ngIf u *ngFor) fuq element wieħed: kull wieħed jeħtieġ il-wrapper template tiegħu stess.
Librerija ta' mistoqsijiet ta' intervisti tal-IT b'tweġibiet dettaljati — minn Junior sa Senior.
Iddona