संरचनात्मक निर्देशनहरू (* सहितका, जस्तै *ngIf/) DOM लाई परिवर्तन गर्छन्। syntactic sugar हो — पर्दाको पछाडि, Angular ले तत्वलाई मा लपेट्छ र निर्देशनले नियन्त्रण गर्छ कि त्यो टेम्प्लेट कहिले/कसरी DOM मा render भयो।
संरचनात्मक निर्देशनहरू (* सहितका, जस्तै *ngIf/) DOM लाई परिवर्तन गर्छन्। syntactic sugar हो — पर्दाको पछाडि, Angular ले तत्वलाई मा लपेट्छ र निर्देशनले नियन्त्रण गर्छ कि त्यो टेम्प्लेट कहिले/कसरी DOM मा render भयो।
*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 लाई भन्छ: "यो तत्वलाई टेम्प्लेटमा लपेट गर, र निर्देशनलाई यो निर्णय गरन दे कि यो DOM मा कहिले stamp गरिनुपर्छ।" <ng-template> अनुपयोगी मार्कअप को एक भाग हो जो निर्देशनले यसलाई तुरुन्तै गरेसम्म render हुँदैन।
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>
दुई इनजेक्ट गरिएका भागहरू महत्त्वपूर्ण छन्: TemplateRef तत्वको टेम्प्लेट हो ("के render गर्ने"), र ViewContainerRef DOM मा स्थान हो ("कहाँ")। निर्देशनले createEmbeddedView लाई कल गर्छ तत्व थप्न वा clear लाई हटाउन।
<!-- 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> }
यो नयाँ वाक्यविन्यास अझ पढ्न योग्य र प्रदर्शनकारी छ, यद्यपि अन्तर्निहित थप्न/हटाउने अवधारणा समान छ।
* → <ng-template> desugaring बुझ्नुले कसरी *ngIf/*ngFor DOM थप र हटाउँछ भनेर स्पष्ट गर्छ, र यसले तपाईंलाई कस्टम संरचनात्मक निर्देशनहरू बनाउन अनुमति दिन्छ (TemplateRef + ViewContainerRef प्रयोग गरेर) उन्नत टेम्प्लेट नियन्त्रणको लागि — उदाहरणका लागि अनुमति-आधारित rendering, कस्टम रिपीटर, वा आलस्य stamping।
यो पनि स्पष्ट गर्छ कि तपाई किन एक तत्वमा दुई संरचनात्मक निर्देशनहरू (*ngIf र *ngFor) राख्न सक्नु हुँदैन: प्रत्येकलाई आफ्नो आफ्नै टेम्प्लेट र्यापर चाहिन्छ।