Yapısal direktifler (* ile olanlar, *ngIf/ gibi) DOM'u değiştirir. sözdizimsel şeker — başlık altında, Angular öğeyi bir içine sarıp direktif o şablonun ne zaman/nasıl render edileceğini kontrol eder.
Yapısal direktifler (* ile olanlar, *ngIf/ gibi) DOM'u değiştirir. sözdizimsel şeker — başlık altında, Angular öğeyi bir içine sarıp direktif o şablonun ne zaman/nasıl render edileceğini kontrol eder.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* Angular'a şunu söyler: "bu öğeyi bir şablona sarın ve direktifin onu DOM'a ne zaman damgalayacağına karar vermesine izin verin." <ng-template> bir direktif tarafından örneklenene kadar render edilmeyen inert bir işaretleme parçasıdır.
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>
Enje edilen iki parça anahtardır: TemplateRef öğenin şablonudur ("ne render edileceği") ve ViewContainerRef DOM'daki konumdur ("nerede"). Direktif öğeyi eklemek için createEmbeddedView çağrısı yapar veya kaldırmak için clear çağrısı yapar.
<!-- 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> }
Bu daha yeni sözdizimi daha okunabilir ve performanslıdır, ancak temeldeki ekleme/kaldırma kavramı aynıdır.
* → <ng-template> desugaring'i anlamak *ngIf/*ngFor'un DOM'u nasıl eklediğini ve kaldırdığını açıklar ve özel yapısal direktifler (TemplateRef + ViewContainerRef kullanarak) oluşturmanıza olanak tanır — örn. izin tabanlı render, özel yineleyiciler veya tembel damgalama gibi ileri şablon kontrolü için.
Ayrıca iki yapısal direktifi (*ngIf ve *ngFor) tek bir öğeye neden koyamayacağınızı açıklar: her biri kendi şablon sarmalayıcısına ihtiyaç duyar.