அடுத்தது

Angular Alias with as in *ngIf

உண்மை மதிப்பிலிருந்து உள்ளூர் மாற்றுப் பெயரை உருவாக்க as ஐப் பயன்படுத்தி வெளிப்பாடுகளை மீண்டும் செய்வதைத் தவிர்க்க

*ngIf இல் as உடன் மாற்றுப் பெயர் என்றால் என்ன?

நிபந்தனையின் உண்மை மதிப்பிற்கு உள்ளூர் மாற்றுப் பெயரை உருவாக்கவும்.

எடுத்துக்காட்டு: *ngIf="user as u" பின்னர் உள்ளே u ஐப் பயன்படுத்தவும்.

வெளிப்பாடுகளை மீண்டும் செய்வதன் மூலம் டெம்ப்ளேட்டுகளை சுத்தமாக்குகிறது.

நிபந்தனை மதிப்பீடு

user உண்மையா?

மாற்றுப் பெயர் உருவாக்கம்

as u உள்ளூர் மாற்றுப் பெயரை உருவாக்குகிறது

டெம்ப்ளேட் பயன்பாடு

u.name உடன் மீண்டும் செய்யாமல் பயன்படுத்தவும்

எப்போது as உடன் மாற்றுப் பெயரைப் பயன்படுத்துவது

அதே வெளிப்பாடு பல முறை குறிப்பிடப்படும் போது

மறுபடியும் பயன்படுத்துவதைத் தவிர்க்க

மதிப்பு தேவைப்படும் else டெம்ப்ளேட்டைப் பயன்படுத்தும் போது

இரண்டு கிளைகளுக்கும் அணுகலை வழங்குகிறது

வாசிப்புத்தன்மையை மேம்படுத்த மற்றும் நகலெடுப்பைக் குறைக்க

டெம்ப்ளேட்டுகளை சுத்தமாகவும் பராமரிக்கக்கூடியதாகவும் வைத்திருங்கள்

நிபந்தனை ரெண்டரிங்:

as மற்றும் else உடன் *ngIf க்கான எடுத்துக்காட்டுகள் நிபந்தனை ரெண்டரிங் பகுதியின் கீழ் உள்ளன.

ஒப்பீடு: மாற்றுப் பெயர் இல்லாமல் vs மாற்றுப் பெயருடன்

மாற்றுப் பெயர் இல்லாமல்

<p *ngIf="user">
  Hello {{ user.name }}!
  Email: {{ user.email }}
  Age: {{ user.age }}
</p>
<ng-template #empty>No user</ng-template>
  • குறைபாடுகள்: user பல முறை மீண்டும் செய்யப்படுகிறது
  • பராமரிப்பு: மாற்றங்களுக்கு பல இடங்களைப் புதுப்பிக்க வேண்டும்
  • பிழை அபாயம்: தட்டச்சு பிழைகளுக்கான உயர் வாய்ப்பு

மாற்றுப் பெயருடன்

<p *ngIf="user as u; else empty">
  Hello {{ u.name }}!
  Email: {{ u.email }}
  Age: {{ u.age }}
</p>
<ng-template #empty>No user</ng-template>
  • நன்மைகள்: user ஒரு முறை மட்டுமே குறிப்பிடப்பட்டுள்ளது
  • பராமரிப்பு: ஒரு இடத்தில் மட்டுமே மாற்றங்கள் தேவை
  • துல்லியம்: தட்டச்சு பிழைகளின் குறைந்த வாய்ப்பு
  • வாசிப்புத்தன்மை: குறுகிய, சுத்தமான குறியீடு

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

உங்கள் சொந்த 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: `
    
    
Hello {{ u.name }}!

    No user
  `
})
export class App {
  user: { name: string } | null = { name: 'Ada' };
  toggle() { this.user = this.user ? null : { name: 'Ada' }; }
}

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>

நேரடி டெமோ: மாற்றுப் பெயர் கையாளுதல்

Hello Ada!

நடப்பு நிலை: பயனர் வரையறுக்கப்பட்டுள்ளது

டெம்ப்ளேட் வெளிப்பாடு: *ngIf="user as u; else empty"

மாற்றுப் பெயர் மதிப்பு: u = { name: 'Ada' }

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

*ngIf="user as u"

user உண்மையாக இருக்கும் போது, user மதிப்பை வைத்திருக்கும் உள்ளூர் மாற்றுப் பெயர் u ஐ உருவாக்கவும்.

மாற்றுப் பெயர் பயன்பாடு

தொகுதிக்குள், user.name ஐ மீண்டும் செய்வதற்குப் பதிலாக u.name ஐப் பயன்படுத்தவும்.

else empty

user பொய்யாக இருக்கும் போது, #empty மூலம் குறிப்பிடப்பட்ட டெம்ப்ளேட்டை ரெண்டர் செய்யவும்.

toggle()

பொத்தான் user ஐ null மற்றும் ஒரு பொருள் இடையே மாற்றுகிறது இரண்டு பாதைகளையும் நிரூபிக்க.

மாற்றுப் பெயர் நோக்கம்:

as மாற்றுப் பெயர் நிபந்தனை உண்மையாக இருக்கும் தொகுதிக்கு மட்டுமே நோக்கப்பட்டுள்ளது. else தொகுதிக்குள் மாற்றுப் பெயரை நீங்கள் அணுக முடியாது, ஏனெனில் அது வரையறுக்கப்படவில்லை (நிபந்தனை பொய் என்பதால்). இரண்டு கிளைகளுக்கும் மதிப்பு தேவைப்பட்டால், கூறு முறையைப் பயன்படுத்தவும்.

Angular 17+ கட்டுப்பாட்டு ஓட்டம்:

Angular 17+ இல் புதிய கட்டுப்பாட்டு ஓட்ட தொடரியல் (@if, @for, @switch) அதே அம்சத்தை வழங்குகிறது: @if (user; as u) { Hello {{ u.name }}! } @else { No user }. புதிய திட்டங்களுக்கு புதிய தொடரியலைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது, ஆனால் இருக்கும் குறியீட்டுக்கு *ngIf இல் as இன்னும் முழுமையாக ஆதரிக்கப்படுகிறது.

பயிற்சி

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

❓*ngIf / @if மாற்றுப் பெயரிடலில் 'as' என்ன செய்கிறது?

கூறின் பெயரை மாற்றுகிறது
✗ தவறானது! 'as' கூறு பெயர் மாற்றத்திற்குப் பயன்படுத்தப்படவில்லை. கூறு பெயர்கள் TypeScript வகுப்பு பெயர்கள் மற்றும் HTML தேர்விகளால் வரையறுக்கப்படுகின்றன, *ngIf தொடரியல் மூலம் அல்ல.
மதிப்புக்கு உள்ளூர் மாற்றுப் பெயரை உருவாக்குகிறது
✓ சரி! *ngIf அல்லது @if இல் 'as' கீப்வேர்டு நிபந்தனை உண்மையாக இருக்கும் போது அதன் மதிப்பிற்கு ஒரு உள்ளூர் மாற்றுப் பெயரை (அலியஸ்) உருவாக்கப் பயன்படுகிறது. இது டெம்ப்ளேட் தொகுதிக்குள் அந்த மதிப்பை மீண்டும் மீண்டும் சொல்லாமல் பயன்படுத்த அனுமதிக்கிறது, குறியீட்டை சுத்தமாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது.
ஒரு தொகுதியை இறக்குமதி செய்கிறது
✗ தவறானது! 'as' தொகுதி இறக்குமதிக்குப் பயன்படுத்தப்படவில்லை. தொகுதிகள் TypeScript இறக்குமதி அறிக்கைகள் (import) மூலம் இறக்குமதி செய்யப்படுகின்றன, *ngIf தொடரியல் மூலம் அல்ல.

மாற்றுப் பெயர் நன்மைகள்:

as மாற்றுப் பெயரைப் பயன்படுத்துவது பல நன்மைகளைக் கொண்டுள்ளது: 1) நகலெடுப்பைக் குறைக்கிறது (மதிப்பை ஒருமுறை மட்டுமே குறிப்பிடவும்), 2) பராமரிப்பை மேம்படுத்துகிறது (ஒரு இடத்தில் மட்டுமே மாற்றங்கள்), 3) பிழைகளைக் குறைக்கிறது (தட்டச்சு பிழைகளின் குறைந்த வாய்ப்பு), மற்றும் 4) வாசிப்புத்தன்மையை மேம்படுத்துகிறது (குறுகிய, தெளிவான குறியீடு).

அடுத்தது