ஆங்குலர் கட்டுப்பாடு பாய்வு
கட்டுப்பாடு பாய்வு வழிமுறைகள் (@if, @for, @switch) டெம்ப்ளேட்டுகளில் கிளைகள், பட்டியல்கள் மற்றும் வழக்குகளை வழங்குகின்றன மற்றும் புதிய குறியீட்டிற்கு பழைய *ngIf/*ngFor/[ngSwitch] ஐ மாற்றுகின்றன.
கட்டுப்பாடு பாய்வு அடிப்படைகள்
@if
விருப்பமான else if/else உடன் நிபந்தனை தொகுதிகள்.
@for
நிலையான அடையாளத்திற்கான track மற்றும் காலியான நிலைகளுக்கான விருப்பமான @empty உடன் சுழற்சிகள்.
@switch
பொருந்தக்கூடிய வழக்கைத் தேர்ந்தெடுத்து வழங்குகிறது.
முன்னுரிமை
Angular 17+ இல் புதிய குறியீட்டிற்கு விருப்பமானது; பழைய *ngIf/*ngFor/[ngSwitch] ஆதரவில் உள்ளன.
கட்டுப்பாடு பாய்வு எடுத்துக்காட்டுகள்
@if (score > 90) { <p>A</p> }
@else if (score > 75) { <p>B</p> }
@else { <p>C</p> }
<ul>
@for (it of items; track it.id) {
<li>{{ it.label }}</li>
}
@empty {
<li>No items</li>
}
</ul>
@switch (status) {
@case ('pending') { <p>Pending</p> }
@case ('done') { <p>Done</p> }
@default { <p>Unknown</p> }
}குறியீடு விளக்கம்:
- @if ... @else: ஒரு நிபந்தனையின் அடிப்படையில் வெவ்வேறு தொகுதிகளை வழங்குவதற்கான கிளைகள்.
- @for (...; track ...): மீண்டும் மீண்டும் செய்து DOM மீண்டும் பயன்படுத்துவதற்கான நிலையான அடையாளங்களை வைத்திருக்க track ஐப் பயன்படுத்துகிறது.
- @switch/@case/@default: பொருந்தக்கூடிய வழக்கைத் தேர்ந்தெடுத்து வழங்குகிறது.
தொடர்புடையவை:
- டெம்ப்ளேட்டுகள், வழிமுறைகள் மற்றும் பட்டியல்கள் ஆகியவற்றைப் பார்க்கவும்.
- நிலையான பட்டியல் வழங்கலுக்கு track உடன் @for ஐப் பயன்படுத்தவும்.
- வாசிக்கக்கூடிய கிளைகளுக்கு @if ...; else ஐப் பயன்படுத்தவும்.
கட்டுப்பாடு பாய்வு அடிப்படைகள்
@if ...; else உடன் உள்ளடக்கத்தை மாற்று.
நிலையான DOM புதுப்பிப்புகளுக்கான track வெளிப்பாட்டுடன் @for உடன் மீண்டும் செய்யவும்.
அடிப்படை எடுத்துக்காட்டுகள்
@if (show) { <p>Visible</p> } @else { <p>Hidden</p> }
@for (item of items; track item) { <li>{{ item }}</li> }விளக்கம்:
@if உடன் உள்ளடக்கத்தை மாற்றி, ஒரு track வெளிப்பாட்டைப் பயன்படுத்தி பட்டியல்களை @for உடன் வழங்கவும்:
முழுமையான எடுத்துக்காட்டு
கட்டுப்பாடு பாய்வு பயன்பாடு
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Control Flow</h3>
<button (click)="show.set(!show())">Toggle</button>
<button (click)="items.set([])">Clear</button>
<button (click)="reset()">Reset</button>
@if (show()) {
<p>Visible</p>
} @else {
<p>Hidden</p>
}
<ul>
@for (item of items(); track item) {
<li>{{ item }}</li>
} @empty {
<li>No items</li>
}
</ul>
`
})
export class App {
show = signal(true);
items = signal(['One','Two','Three']);
reset() { this.items.set(['One','Two','Three']); }
}
bootstrapApplication(App);எடுத்துக்காட்டு விளக்கம்:
- @if ... @else: show() சிக்னலின் அடிப்படையில் பத்தியை மாற்றுகிறது.
- @for ... track item: items() சிக்னலிலிருந்து பட்டியலை வழங்குகிறது மற்றும் track உடன் DOM ஐப் பாதுகாக்கிறது.
- @empty: பட்டியல் காலியாக இருக்கும்போது ஒரு ஃபால்பேக்கைக் காட்டுகிறது.
- சிக்னல்கள்: பொத்தான்கள் show மற்றும் items ஐப் புதுப்பிக்கின்றன, அவை பார்வையை மீண்டும் வழங்குகின்றன.
முக்கியமான குறிப்புகள்:
- Track ஐப் பயன்படுத்தவும்: பொருள்களின் பட்டியல்களுக்கு நிலையான விசையால் கண்காணிப்பதை விரும்பவும் (எ.கா., track it.id); பழமையானவற்றுக்கு, track item நன்றாக உள்ளது.
- சிக்னல்கள்: டெம்ப்ளேட்டுகளில் சிக்னல்களை sig() உடன் படிக்கவும் (எ.கா., @if (flag()), @for (x of list())).
- பழைய சமநிலை: *ngFor இல், @for இல் உள்ள track உடன் பொருந்த trackBy ஐப் பயன்படுத்தவும்.
- பழைய தொடரியல்: *ngIf/*ngFor/[ngSwitch] ஆதரவில் உள்ளன; புதிய குறியீட்டிற்கு @if/@for/@switch ஐ விரும்பவும்.
- கூறில் தர்க்கத்தை வைத்திருக்கவும்: கூறில் கொடிகளையும் பெறப்பட்ட வரிசைகளையும் கணக்கிடுங்கள்; டெம்ப்ளேட்டுகளை எளிதாக வைத்திருக்கவும்.
- பக்க விளைவுகள் இல்லை: கட்டுப்பாடு-பாய்வு தொகுதிகளுக்குள் பக்க விளைவுகளைத் தவிர்க்கவும்; கையாளிகள்/சேவைகளில் நிலையைப் புதுப்பிக்கவும்.
புதிய vs பழைய தொடரியல் ஒப்பீடு
| செயல்பாடு | புதிய தொடரியல் (Angular 17+) | பழைய தொடரியல் |
|---|---|---|
| நிபந்தனை வழங்கல் | @if (condition) { content } | *ngIf="condition" |
| மீள் செய்தல் | @for (item of items; track item.id) { content } | *ngFor="let item of items; trackBy: trackById" |
| வழி மாற்று | @switch (value) { @case (x) { content } } | [ngSwitch] மற்றும் *ngSwitchCase |
| காலியான நிலை | @empty { fallback content } | *ngIf="items.length === 0" |
ஜாஸிஃப் குழு பரிந்துரை:
அனைத்து புதிய ஆங்குலர் திட்டங்களுக்கும் @if, @for, மற்றும் @switch கட்டுப்பாடு பாய்வு தொடரியலைப் பயன்படுத்தவும். இது மேம்பட்ட வகை பாதுகாப்பு, சிறந்த செயல்திறன் மற்றும் மேம்பட்ட வாசிக்கும் திறனை வழங்குகிறது.
பயிற்சி
எந்த நவீன ஆங்குலர் தொடரியல் ஒரு தொகுதியை நிபந்தனையாக வழங்குகிறது?