அடுத்தது

Angular Template Statements and $event

டெம்ப்ளேட்டில் பயனர் நிகழ்வுகளைக் கையாளுதல் மற்றும் $event மூலம் சொந்த நிகழ்வை அணுகுதல்

டெம்ப்ளேட் அறிக்கைகள் மற்றும் $event என்றால் என்ன?

(click), (input), போன்றவற்றுடன் பைண்ட் செய்யப்பட்ட நிகழ்வுகளுக்கு பதிலளிக்க இயங்கும்.

சொந்த நிகழ்வு பொருளுக்கு $event ஐப் பயன்படுத்தவும்.

target.value போன்ற வகைகளுக்கு உதவ $any(...) ஐப் பயன்படுத்தவும்.

பயனர் நிகழ்வு

கிளிக், உள்ளீடு, கீபோர்டு

$event பொருள்

நிகழ்வு விவரங்களைக் கொண்டுள்ளது

டெம்ப்ளேட் அறிக்கை

நிகழ்வைக் கையாளும் தர்க்கம்

தொடரியல்:

<button (click)="count = count + 1">Add</button>

<input (input)="text = $any($event.target).value">

எப்போது டெம்ப்ளேட் அறிக்கைகளைப் பயன்படுத்துவது

எளிய UI தொடர்புகள்

நிகழ்வுகளிலிருந்து நிலைப் புதுப்பிப்புகள்

(click)="toggle()"

குறைந்தபட்ச டெம்ப்ளேட் தர்க்கம்

சிக்கலான தர்க்கத்தை கூறு வகுப்பிற்கு நகர்த்தவும்

handleComplexLogic()

டெம்ப்ளேட் குறிப்பு மாறிகள்

நேரடி தொடர்புகளுக்கு ஜோடியாக

(input)="value = #box.value"

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

எளிய பணிகளுக்கு மட்டுமே டெம்ப்ளேட் அறிக்கைகளைப் பயன்படுத்தவும். சிக்கலான தர்க்கத்திற்கு, கூறு முறைகளைப் பயன்படுத்தவும். டெம்ப்ளேட்டை சுத்தமாகவும் பராமரிக்கக்கூடியதாகவும் வைத்திருங்கள்.

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

நிகழ்வுகளை டெம்ப்ளேட்டில் கையாளவும் மற்றும் $event ஐப் பயன்படுத்தி சொந்த மதிப்புகளை அணுகவும்:

கிளிக் நிகழ்வு

<button (click)="count = count + 1">Add</button>

(click): கூறு நிலையைப் புதுப்பிக்கும் கிளிக் ஹேண்ட்லரை பைண்ட் செய்கிறது.

உள்ளீட்டு நிகழ்வு

<input (input)="text = $any($event.target).value">

$event: சொந்த நிகழ்வு பொருள்; $any($event.target).value உள்ளீட்டு உரையைப் படிக்கிறது.

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

நிகழ்வுகளை டெம்ப்ளேட்டில் கையாளவும் மற்றும் $event ஐப் பயன்படுத்தி சொந்த மதிப்புகளை அணுகவும்:

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

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

main.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
    
    
Count: {{ count }}

    
Text: {{ text || '(empty)' }}

  `
})
export class App {
  count = 0;
  text = '';
}

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>

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

எண்ணிக்கை

0

டெம்ப்ளேட் அறிக்கை: (click)="count = count + 1"

உரை

(காலி)

டெம்ப்ளேட் அறிக்கை: (input)="text = $any($event.target).value"

$event மதிப்பு

-

கடைசி நிகழ்வு: இல்லை

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

(click)="count = count + 1"

பொத்தான் கிளிக் செய்யப்படும் போது கூறு சூழலில் அறிக்கையை இயக்குகிறது, count புலத்தைப் புதுப்பிக்கிறது.

$event

சொந்த நிகழ்வு பொருள். $any($event.target).value தற்போதைய உள்ளீட்டு உரையைப் படிக்கிறது (TypeScript ஐ திருப்திப்படுத்த வார்ப்படைக்கப்பட்டது).

[value]="text"

தற்போதைய கூறு நிலையை உள்ளீட்டு உறுப்புக்கு மீண்டும் பிரதிபலிக்கும் ஒரு-வழி பண்பு பைண்டிங்.

தர்க்கத்தை சிறியதாக வைத்திருங்கள்:

டெம்ப்ளேட்டில் எளிய பணிகளைச் செய்யுங்கள்; பல-படி தர்க்கத்தை கூறு முறைகளுக்குள் நகர்த்தவும்.

மேலும் கற்றுக்கொள்ள:

நிகழ்வு பைண்டிங் மற்றும் கீபோர்டு நிகழ்வுகள் பற்றி மேலும் நிகழ்வுகள் பகுதியைப் பார்க்கவும்.

பயிற்சி

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

❓டெம்ப்ளேட்டிலிருந்து ஒரு அறிக்கையை (முறையை அழைக்க) எப்படி பைண்ட் செய்வது?

(event)="handler()"
✓ சரி! (event)="handler()" தொடரியல் ஒரு நிகழ்வு ஹேண்ட்லரை ஒரு டெம்ப்ளேட் அறிக்கையுடன் பைண்ட் செய்யப் பயன்படுகிறது. இது நிகழ்வு பைண்டிங் தொடரியல் ஆகும், இது Angular க்கு ஒரு நிகழ்வைக் கையாள ஒரு முறையை அழைக்க வேண்டும் என்பதைக் குறிக்கிறது.
[event]="handler()"
✗ தவறானது! [event]="handler()" தொடரியல் நிகழ்வு பைண்டிங் அல்ல - இது பண்பு பைண்டிங் தொடரியல் ஆகும், இது உறுப்பு பண்புகளை அமைக்கப் பயன்படுகிறது. சதுர அடைப்புக்குறிகள் [] பண்பு பைண்டிங்கிற்குப் பயன்படுத்தப்படுகின்றன, நிகழ்வு பைண்டிங்கிற்கு அல்ல.
{{ handler() }}
✗ தவறானது! {{ handler() }} தொடரியல் நிகழ்வு பைண்டிங் அல்ல - இது இடைச்செருகல் தொடரியல் ஆகும், இது காட்சிக்கு தரவைக் காட்டப் பயன்படுகிறது. சுருள் அடைப்புக்குறிகள் {{ }} இடைச்செருகலுக்குப் பயன்படுத்தப்படுகின்றன, இது தானாகவே மதிப்பீடு செய்யப்படுகிறது, நிகழ்வுகளுக்காகக் காத்திருக்காது.

பைண்டிங் வகைகள்:

Angular மூன்று முக்கிய வகையான பைண்டிங்களைக் கொண்டுள்ளது: நிகழ்வு பைண்டிங் ((event)) பயனர் நிகழ்வுகளைக் கையாள, பண்பு பைண்டிங் ([prop]) உறுப்பு பண்புகளை அமைக்க, மற்றும் இடைச்செருகல் ({{ }}) காட்சிக்கு தரவைக் காட்ட. ஒவ்வொன்றும் வெவ்வேறு நோக்கங்களுக்காக உள்ளன மற்றும் வேறுபட்ட தொடரியலைக் கொண்டுள்ளன.

அடுத்தது