அடுத்தது

Angular Template Reference Variables

உறுப்புகளுக்கு உள்ளூர் #var கொடுத்து மதிப்புகளைப் படித்தல் அல்லது முறைகளை அழைத்தல்

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

ஒரு உறுப்பு அல்லது டைரக்டிவ் நிகழ்வுக்கு உள்ளூர் பெயரைக் கொடுக்கிறது (எ.கா., #box).

நீங்கள் மதிப்புகளை நேரடியாக டெம்ப்ளேட்டில் படிக்க அல்லது முறைகளை அழைக்க அனுமதிக்கிறது.

அது அறிவிக்கப்பட்ட டெம்ப்ளேட்டுக்கு மட்டுமே நோக்கப்பட்டுள்ளது.

1

HTML உறுப்பு

உள்ளீடு, பொத்தான், வகுப்பு

2

# குறிப்பு

#box, #input, #myBtn

3

டெம்ப்ளேட் அணுகல்

box.value, input.focus()

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

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

உள்ளீட்டு மதிப்பைப் படித்தல், உறுப்பில் கவனம் செலுத்துதல்

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

டைரக்டிவ்/கூறு API

கூடுதல் பைண்டிங்கள் இல்லாமல் காட்சியில் அணுகல்

(click)="#dialog.open()"

சிக்கலான தர்க்கம்

கூறு முறைகள் மற்றும் நிலையைப் பயன்படுத்தவும்

component.handleInput(value)

பரிந்துரை:

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

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

மதிப்புகளைப் படிக்க அல்லது முறைகளை நேரடியாக டெம்ப்ளேட்டில் அழைக்க டெம்ப்ளேட் குறிப்பு மாறிகளைப் பயன்படுத்தவும்:

<input #box (input)="val = box.value">
<button (click)="box.focus()">Focus</button>

குறியீடு விளக்கம்:

  • #box: உள்ளீடு உறுப்பு நிகழ்வுக்கு உள்ளூர் டெம்ப்ளேட் குறிப்பை அறிவிக்கிறது.
  • மதிப்பைப் படிக்கவும்: box.value உள்ளீட்டின் தற்போதைய உரையைப் பெறுகிறது.
  • முறையை அழைக்கவும்: box.focus() உள்ளீட்டில் சொந்த focus() ஐ அழைக்கிறது.

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

மதிப்புகளைப் படிக்க அல்லது முறைகளை நேரடியாக டெம்ப்ளேட்டில் அழைக்க டெம்ப்ளேட் குறிப்பு மாறிகளைப் பயன்படுத்தவும்:

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

உங்கள் சொந்த 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],
  styles: [`
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    input { padding: 6px 8px; }
  `],
  template: `
    
Template Reference Variables (#var)

    

      
      
      
      length={{ box.value?.length || 0 }}
    

    
Current: {{ current || '(empty)' }}

  `
})
export class App {
  current = '';
  read(val: string) { this.current = val ?? ''; }
}

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>

நேரடி டெமோ:

டெம்ப்ளேட் குறிப்பு மாறிகள் (#var) டெமோ

நீளம்: 0 எழுத்துகள்

தற்போதைய: (காலி)

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

#box குறிப்பு மாறி

உள்ளீடு உறுப்பு நிகழ்வுக்கு பைண்ட் செய்யப்பட்ட ஒரு டெம்ப்ளேட் குறிப்பு மாறி.

மதிப்பைப் படிக்கவும்

box.value உள்ளீட்டின் தற்போதைய உரையைப் படிக்கிறது.

முறையை அழைக்கவும்

box.focus() உள்ளீட்டின் focus முறையை அழைக்கிறது.

நிலையைப் புதுப்பிக்கவும்

(input)="current = box.value" தற்போதைய உள்ளீட்டு உரையை கூறின் current புலத்தில் நகலெடுக்கிறது.

நோக்கம்:

மாறி அது அறிவிக்கப்பட்ட டெம்ப்ளேட்டுக்கு மட்டுமே உள்ளது. இது கூறு வகுப்பிலிருந்து அணுக முடியாது, டெம்ப்ளேட் உள்ளே மட்டுமே.

பாதுகாப்பு மற்றும் செயல்திறன்:

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

பயிற்சி

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

❓டெம்ப்ளேட் குறிப்பு மாறி (எ.கா., #input) உங்களுக்கு என்ன தருகிறது?

எந்த கூறிலிருந்தும் அணுகக்கூடிய உலகளாவிய மாறி
✗ தவறானது! டெம்ப்ளேட் குறிப்பு மாறிகள் உலகளாவியவை அல்ல - அவை அறிவிக்கப்பட்ட டெம்ப்ளேட்டுக்கு மட்டுமே நோக்கப்பட்டுள்ளன.
ஒரு சேவையை இறக்குமதி செய்வதற்கான ஒரு வழி
✗ தவறானது! சேவைகள் @Injectable() மற்றும் டிபெண்டென்சி இன்ஜெக்ஷன் மூலம் இறக்குமதி செய்யப்படுகின்றன, # மாறிகள் மூலம் அல்ல.
DOM உறுப்பு அல்லது டைரக்டிவ் நிகழ்வுக்கான குறிப்பு
✓ சரி! டெம்ப்ளேட் குறிப்பு மாறிகள் (#var) DOM உறுப்புகள் அல்லது Angular டைரக்டிவ் நிகழ்வுகளுக்கான உள்ளூர் குறிப்புகளை வழங்குகின்றன, அவற்றின் பண்புகள் மற்றும் முறைகளை டெம்ப்ளேட்டில் நேரடியாக அணுக அனுமதிக்கின்றன.

நோக்கம் புரிதல்:

டெம்ப்ளேட் குறிப்பு மாறிகள் DOM உறுப்புகளை டெம்ப்ளேட் உள்ளே குறிப்பிடுவதற்கான ஒரு வசதியான வழியாகும். அவை உறுப்பு பண்புகளைப் படிக்கவும், முறைகளை அழைக்கவும் அனுமதிக்கின்றன, ஆனால் அவை கூறு தரவு மாதிரிக்கு மாறாக இருக்கக்கூடாது. அவற்றை எளிய, உள்ளூர் டெம்ப்ளேட் செயல்பாடுகளுக்குப் பயன்படுத்தவும்.

அடுத்தது