నిర్మాణ నిర్దేశాలు (* సহ, *ngIf/*ngFor వంటివి) DOM ను ద్వారా మారుస్తాయి. సింటాక్టిక్ చక్కెర — హుడ్ కింద, Angular మూలకను లో చుట్టి ఉంచుతుంది మరియు నిర్దేశం ఆ టెమ్ప్లేట్ ఎలా ప్రదర్శించబడుతుందో నియంత్రిస్తుంది.
నిర్మాణ నిర్దేశాలు (* సহ, *ngIf/*ngFor వంటివి) DOM ను ద్వారా మారుస్తాయి. సింటాక్టిక్ చక్కెర — హుడ్ కింద, Angular మూలకను లో చుట్టి ఉంచుతుంది మరియు నిర్దేశం ఆ టెమ్ప్లేట్ ఎలా ప్రదర్శించబడుతుందో నియంత్రిస్తుంది.
*<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 లో స్టాంప్ చేయడానికి ఎప్పుడు నిర్ణయించనివ్వండి." <ng-template> ఎక్కువ మార్కప్ ముక్క, ఇది నిర్దేశం దానిని ఉదాహరణ చేయటం వరకు రెండర్ చేయబడదు.
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 మూలకం యొక్క టెమ్ప్లేట్ ("ఏమి ప్రదర్శించాలి"), మరియు 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> డీశుగరింగ్ అర్థం చేసుకోవడం *ngIf/*ngFor DOM ను ఎలా జోడించి తీసివేస్తుందో వెలుగులో చేస్తుంది, మరియు ఆచరణ నిర్మాణ నిర్దేశాలను (TemplateRef + ViewContainerRef ఉపయోగించి) ఉన్నతమైన టెమ్ప్లేట్ నియంత్రణ కోసం నిర్మించుకోవడానికి అనుమతిస్తుంది — ఉదా. అనుమతి-ఆధారిత ప్రదర్శన, కస్టమ్ పునరావృత్తులు, లేదా సోమరి స్టాంపింగ్.
మీరు రెండు నిర్మాణ నిర్దేశాలను (*ngIf మరియు *ngFor) ఒక మూలకపై ఎందుకు ఉంచలేరో కూడా ఇది స్పష్టం చేస్తుంది: ప్రతిదానికి దాని స్వంత టెమ్ప్లేట్ రాపర్ అవసరం.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం