Strukturne direktive (tiste z *, kot so *ngIf/*ngFor) spreminjajo DOM z . je sintaktični sladkor — pod površino Angular zalomi element v in direktiva nadzira, ali in kako je ta template prikazan.
Strukturne direktive (tiste z *, kot so *ngIf/*ngFor) spreminjajo DOM z . je sintaktični sladkor — pod površino Angular zalomi element v in direktiva nadzira, ali in kako je ta template prikazan.
*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
Znak * pove Angular-u: "zalomi ta element v template in naj direktiva odloči, kdaj ga vstaviti v DOM." <ng-template> je inertni del označevanja, ki se ne prikaže, dokler direktiva ne ustvari njene instance.
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 injicirana dela sta ključna: TemplateRef je template elementa ("kaj prikazati"), in ViewContainerRef je lokacija v DOM-u ("kje"). Direktiva kliče createEmbeddedView za dodajanje elementa ali clear za njegovo odstranitev.
<!-- 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> }
Ta novejša sintaksa je bolj berljiva in učinkovita, čeprav je osnovni koncept dodajanja/odstranjevanja enak.
Razumevanje desugaring-a * → <ng-template> pojasni, kako *ngIf/*ngFor dodajata in odstranjujeta DOM, ter vam omogoči, da zgradite prilagojene strukturne direktive (z uporabo TemplateRef + ViewContainerRef) za naprednjen nadzor template-ov — npr. upodobljanje na podlagi dovoljenj, prilagojene ponovnike ali lenobno pečatljenje.
Tudi pojasnjuje, zakaj ne morete postaviti dveh strukturnih direktiv (*ngIf in *ngFor) na en element: vsaka potrebuje svojo template ovojnico.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj