Treoruithe struchtúrtha (na cinn le *, cosúil le *ngIf/) a athrú an DOM trí . Is siúcra sintéasach é an — faoin tuairim, suíonn Angular an eilimint in agus rialaíonn an treoir cé acu/conas a bhítear an template á ghealadh.
Treoruithe struchtúrtha (na cinn le *, cosúil le *ngIf/) a athrú an DOM trí . Is siúcra sintéasach é an — faoin tuairim, suíonn Angular an eilimint in agus rialaíonn an treoir cé acu/conas a bhítear an template á ghealadh.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
A rá an * le Angular: "cuir an eilimint seo i template, agus lig don treoir a chinneadh cathain a chur ann sa DOM." Is píosa inert markup é <ng-template> nach ndéantar a ghealadh go dtí go mbíonn treoir á a-iniúchadh.
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>
Is iad an dá bhíog insteallta an eochair: TemplateRef is an template an eilimint (an "cad atá le gealadh"), agus ViewContainerRef an suíomh sa DOM (an "cá háit"). Glaonn an treoir createEmbeddedView chun an eilimint a chur leis nó clear a bhaint.
<!-- 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> }
Is sintéacs níos inléite agus níos éifeachtaí an sintéacs níos úire seo, cé go bhfuil an coincheap bunúsach céanna ann.
Tuigint an desugaring * → <ng-template> soiléiríonn conas a chuireann *ngIf/*ngFor leis agus a bhaintear an DOM, agus ceadaíonn sé duit treoruithe struchtúrtha saincheaptha a thógáil (ag baint úsáide as TemplateRef + ViewContainerRef) le haghaidh rialaithe fíorthéachair ar themplates — m.sh. gealadh bunaithe ar chead, athrá saincheaptha, nó stamping mall.
Soiléiríonn sé freisin cén fáth nach féidir dhá threoir struchtúrtha (*ngIf agus *ngFor) a chur ar an eilimint chéanna: is gá dá dhíobh a bheith aici féin template wrapper.
Leabharlann de cheisteanna agallaimh TF le freagraí mionsonraithe — ó Shóisearach go Sinsearach.
Síntiús