கட்டமைப்பு நির்தேசங்கள் (* உடன், *ngIf/ போன்றவை) DOM-ஐ மாற்றுகின்றன. என்பது வாக்கியை சுட்டிக்காட்டும் சர்க்கரை — பின்பக்கத்தில், Angular உறுப்பை இல் மடிக்கிறது மற்றும் நির்ணায় அந்த டெம்பிளேட் எவ்வாறு வழங்கப்படுகிறது என்பதைக் கட்டுப்படுத்துகிறது.
*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 இல் முத்திரை செய்ய எப்போது என்பதை முடிவு செய்யட்டும்." <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) ஒரு உறுப்பில் வைக்க முடியாது என்பதையும் இது தெளிவுபடுத்துகிறது: ஒவ்வொன்றுக்கும் அதன் சொந்த டெம்பிளேட் மடிப்பு தேவை.