அடுத்தது

Angular Structural Directives Micro-syntax

கட்டமைப்பு டைரக்டிவ்களுக்கு * குறுக்குவழியைப் பயன்படுத்துதல்

கட்டமைப்பு டைரக்டிவ்கள் மைக்ரோ-தொடரியல் என்றால் என்ன?

* என்பது அடிப்படை <ng-template> ஆக விரிவடையும் குறுக்குவழி.

சூழல் மாறிகளை வழங்குகிறது (எ.கா., index as i, else).

Angular *ngIf, *ngFor, போன்றவற்றை இந்த தொடரியலைப் பயன்படுத்தி மீண்டும் எழுதுகிறது.

* குறுக்குவழி

*ngIf="show"

மனிதர்-படிக்கக்கூடிய குறுக்குவழி

Angular மாற்றம்

<ng-template [ngIf]="show">

Angular உள்நாட்டில் மாற்றுகிறது

நிகழ்நிலை DOM

<div>உள்ளடக்கம்</div>

நிலையின் அடிப்படையில் காட்டப்படுகிறது/மறைக்கப்படுகிறது

முக்கிய குறிப்பு:

Angular 17+ இல், புதிய கட்டுப்பாட்டு ஓட்ட தொடரியலை விரும்புக (@if, @for, @switch).

*ngIf/*ngFor க்கான மைக்ரோ-தொடரியல் இருக்கும் குறியீட்டுக்கு ஆதரவளிக்கப்படுகிறது. கட்டுப்பாட்டு ஓட்டம் பகுதியைப் பார்க்கவும்.

எப்போது மைக்ரோ-தொடரியலைப் பயன்படுத்துவது

கட்டமைப்பு டைரக்டிவ்கள்

நிலையின் அடிப்படையில் DOM ஐச் சேர்க்க/நீக்க

index as i else

பட்டியல்களை மீண்டும் செய்ய

*ngFor உடன் சுருக்கமாக மீண்டும் செய்ய

let item index as i

வாசிப்புத்தன்மை

வாசிப்புத்தன்மைக்காக குறுக்குவழியைப் பயன்படுத்தவும்; தேவைப்படும் போது வெளிப்படையான <ng-template> ஐப் பயன்படுத்தவும்

சிறந்த நடைமுறை:

புதிய திட்டங்களுக்கு Angular 17+ இல் புதிய கட்டுப்பாட்டு ஓட்ட தொடரியலைப் பயன்படுத்தவும் (@if, @for). இருக்கும் குறியீட்டைப் பராமரிக்க * மைக்ரோ-தொடரியலைப் பயன்படுத்தவும்.

அடிப்படை எடுத்துக்காட்டு

கட்டமைப்பு டைரக்டிவ்களை விரிவாக்கவும் மற்றும் சூழல் மாறிகளை வெளிப்படுத்த * மைக்ரோ-தொடரியலைப் பயன்படுத்தவும்:

*ngIf உடன் நிபந்தனை ரெண்டரிங்

<div *ngIf="ok; else other">OK</div>
<ng-template #other>Not OK</ng-template>

*ngIf="ok; else other": ok உண்மையாக இருக்கும் போது தொகுதியை ரெண்டர் செய்கிறது; இல்லையெனில் #other டெம்ப்ளேட்டை ரெண்டர் செய்கிறது.

*ngFor உடன் மீண்டும் செய்தல்

<li *ngFor="let item of items; index as i">
  {{ i }} {{ item }}
</li>

*ngFor="...; index as i": items மீது சுழற்சி செய்கிறது மற்றும் பூஜ்யம்-அடிப்படையிலான குறியீட்டை i ஆக வெளிப்படுத்துகிறது.

* குறுக்குவழி:

* குறுக்குவழி: Angular *... ஐ அடிப்படை <ng-template> ஆக மீண்டும் எழுதுகிறது.

*ngIf மற்றும் *ngFor க்கான மைக்ரோ-தொடரியல் (index as i, else), மேலும் எடுத்துக்காட்டுகளுக்கு நிபந்தனை ரெண்டரிங் மற்றும் பட்டியல்கள் பகுதிகளைப் பார்க்கவும்.

உரையாடல் எடுத்துக்காட்டு

நிபந்தனையாக ரெண்டர் செய்ய அல்லது மீண்டும் செய்ய *ngIf மற்றும் *ngFor உடன் மைக்ரோ-தொடரியலைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு:

உங்கள் சொந்த Angular சேவையகத்தைப் பெறுங்கள்

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    
    
OK

    Not OK
    
    
      
  • {{ i }} - {{ item }}
    • 
    

  `
})
export class App {
  ok = true;
  items = ['A','B','C'];
}

bootstrapApplication(App);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Angular App</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

நேரடி டெமோ:

கட்டமைப்பு டைரக்டிவ்கள் மைக்ரோ-தொடரியல் டெமோ

*ngIf முடிவு: OK

*ngFor பட்டியல்:

  • 0 - A
  • 1 - B
  • 2 - C

சூழல் மாறிகள்: index as i (i = 0,1,2)

எடுத்துக்காட்டு விளக்கம்

* குறுக்குவழி

*ngIf மற்றும் *ngFor என்பது Angular அடிப்படை <ng-template> ஆக மீண்டும் எழுதும் குறுக்குவழி.

*ngIf="ok; else other"

ok உண்மையாக இருக்கும் போது தொகுதியை ரெண்டர் செய்கிறது; இல்லையெனில் #other மூலம் குறிப்பிடப்பட்ட டெம்ப்ளேட்டை ரெண்டர் செய்கிறது.

*ngFor="let item of items; index as i"

பட்டியல் items மீது மீண்டும் செய்கிறது; item தற்போதைய உறுப்பு மற்றும் i பூஜ்யம்-அடிப்படையிலான குறியீடு.

தொடரியல் பரிணாமம்:

Angular 17 புதிய கட்டுப்பாட்டு ஓட்ட தொடரியலை அறிமுகப்படுத்தியது (@if, @for, @switch) இது * மைக்ரோ-தொடரியலை விட மேம்பட்டது. புதிய திட்டங்களுக்கு புதிய தொடரியலைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது, ஆனால் இருக்கும் குறியீட்டுக்கு * மைக்ரோ-தொடரியல் இன்னும் முழுமையாக ஆதரிக்கப்படுகிறது.

பயிற்சி

உங்கள் அறிவைச் சோதிக்க இந்தப் பயிற்சியை முயற்சிக்கவும்:

❓பட்டியல்களை ரெண்டர் செய்ய எந்த டைரக்டிவ் மைக்ரோ-தொடரியலை (நட்சத்திர வடிவம்) பயன்படுத்துகிறது?

rndList
✗ தவறானது! rndList என்பது Angular இல் சரியான டைரக்டிவ் அல்ல.
*ngFor
✓ சரி! *ngFor டைரக்டிவ் மைக்ரோ-தொடரியலைப் பயன்படுத்தி பட்டியல்களை ரெண்டர் செய்கிறது. * குறியீடு Angular க்கு இது ஒரு கட்டமைப்பு டைரக்டிவ் என்பதைக் குறிக்கிறது, இது அடிப்படை வடிவத்திற்கு விரிவாக்கப்படுகிறது.
microList
✗ தவறானது! microList என்பது Angular இல் சரியான டைரக்டிவ் அல்ல. பட்டியல் மறுசீரமைப்பிற்கான சரியான டைரக்டிவ் *ngFor ஆகும்.

கட்டமைப்பு vs பண்பு டைரக்டிவ்கள்:

Angular இரண்டு வகையான டைரக்டிவ்களைக் கொண்டுள்ளது: கட்டமைப்பு டைரக்டிவ்கள் (*ngIf, *ngFor) DOM கட்டமைப்பை மாற்றுகின்றன, மற்றும் பண்பு டைரக்டிவ்கள் ([ngClass], [ngStyle]) உறுப்பு பண்புகளை மாற்றுகின்றன. கட்டமைப்பு டைரக்டிவ்கள் மட்டுமே * மைக்ரோ-தொடரியலைப் பயன்படுத்துகின்றன.

அடுத்தது