அடுத்தது

Angular ngTemplateOutlet

[ngTemplateOutlet] உடன் ஒரு குறிப்பிடப்பட்ட டெம்ப்ளேட்டை மீண்டும் பயன்படுத்தி ரெண்டர் செய்தல்

ngTemplateOutlet என்றால் என்ன?

<ng-template> மீண்டும் பயன்படுத்தக்கூடிய ஒரு டெம்ப்ளேட் துண்டை ("சமையல் செய்முறை") வரையறுக்கிறது [citation:2][citation:5].

அதை [ngTemplateOutlet] உடன் ரெண்டர் செய்யவும் [citation:1][citation:3].

மதிப்புகளை [ngTemplateOutletContext] மூலம் அனுப்பி, let- மாறிகள் மூலம் படிக்கவும் [citation:1][citation:4].

டெம்ப்ளேட்டை வரையறுக்கவும்

<ng-template #myTpl> உடன்

சூழலை அமைக்கவும்

[ngTemplateOutletContext] உடன் தரவை அனுப்பவும்

ரெண்டர் செய்யவும்

[ngTemplateOutlet]="myTpl" உடன்

எப்போது ngTemplateOutlet ஐப் பயன்படுத்துவது

UI முறைகளை மீண்டும் பயன்படுத்தவும்

வெவ்வேறு தரவு அல்லது ரெண்டரிங் மாறுபாடுகளுடன் [citation:3][citation:4]

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

மீண்டும் பயன்படுத்தக்கூடிய சிக்கலான தர்க்கம் மற்றும் நிலை மேலாண்மைக்கு [citation:3]

காட்சி-மட்ட மீள் பயன்பாட்டிற்கு டெம்ப்ளேட்டுகளைப் பயன்படுத்தவும்

இலகுவான, காட்சி-மட்ட மீள் பயன்பாட்டிற்கு [citation:3]

குறிப்பு:

கூடுதல் DOM உறுப்புகளைச் சேர்க்காத தர்க்க ரேப்பராக <ng-container> ஐப் பயன்படுத்தவும் [citation:2][citation:3].

தொடர்புடையது:

<ng-content> உடன் உள்ளடக்கம் ப்ராஜெக்ஷனுக்கு கூறுகள் பகுதியைப் பார்க்கவும் [citation:3].

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

உங்கள் சொந்த 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: `
    
Templates with ngTemplateOutlet


    

    

    
    

    
      
Info: {{ text }}

    

    
      
Warning: {{ text }}

    

    
      
Success: {{ text }}

    
  `
})
export class App {
  type: 'info' | 'warning' | 'success' = 'info';
  msg = 'Hello';
}

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>

நேரடி டெமோ: டைனமிக் டெம்ப்ளேட் ரெண்டரிங்

Info: Hello Angular!

தற்போதைய டெம்ப்ளேட்: infoTpl

சூழல் மதிப்பு: "Hello Angular!"

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

<ng-template>

மீண்டும் பயன்படுத்தக்கூடிய டெம்ப்ளேட் தொகுதியை வரையறுக்கிறது (குறிப்பிடப்படும் வரை ரெண்டர் செய்யப்படவில்லை) [citation:5][citation:9].

[ngTemplateOutlet]

எந்த டெம்ப்ளேட்டை ரெண்டர் செய்வது என்பதை தேர்ந்தெடுக்கிறது (இங்கே வகையின் அடிப்படையில் மூன்று வெளிப்பாடு மூலம்) [citation:1][citation:8].

[ngTemplateOutletContext]

டெம்ப்ளேட்டில் மதிப்புகளை அனுப்புகிறது. $implicit விசை சூழல் பொருளின் ஒரு சிறப்பு பண்பாகும், இது ஒரு பொதுவான மதிப்பை வழங்கப் பயன்படுகிறது. ஒத்த let- மாறியால் படிக்கப்படுகிறது [citation:1][citation:4][citation:8].

let-text

சூழலில் இருந்து $implicit மதிப்பைப் படிக்கும் டெம்ப்ளேட்டிற்குள் உள்ளூர் மாறியை அறிவிக்கிறது [citation:4][citation:8].

<ng-container>

கூடுதல் DOM உறுப்புகளை உருவாக்காத தர்க்க ரேப்பர் [citation:2]. இது ngTemplateOutlet ஐ வைக்க ஏற்ற இடமாகும்.

வெளிப்படையான தொடரியல்

<ng-container
  [ngTemplateOutlet]="myTemplate"
  [ngTemplateOutletContext]="{ $implicit: data }">
</ng-container>

முழு பண்பு பைண்டிங் தொடரியல்

குறுக்குவழி தொடரியல்

<ng-container
  *ngTemplateOutlet="myTemplate; 
                    context: { $implicit: data }">
</ng-container>

குறைக்கப்பட்ட மைக்ரோ-தொடரியல் [citation:8]

சூழல் புரிதல்:

$implicit பண்பு ஒரு சிறப்பு விசை. நீங்கள் ஒரு let-text மாறியை வரையறுக்கும்போது, இது தானாகவே சூழல் பொருளின் $implicit பண்பின் மதிப்பைப் பெறுகிறது. பிற பண்புகளை அணுக, நீங்கள் வெளிப்படையாகக் குறிப்பிட வேண்டும் (எ.கா., let-idx="index") [citation:4][citation:8].

பயிற்சி

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

❓ngTemplateOutlet என்ன செய்கிறது?

ஒரு குறிப்பிட்ட இடத்தில் <ng-template> ஐ ரெண்டர் செய்கிறது
✓ சரி! ngTemplateOutlet என்பது ஒரு டெம்ப்ளேட் குறிப்பை (TemplateRef) எடுத்து, அதை ஒரு குறிப்பிட்ட இடத்தில் (பொதுவாக ஒரு <ng-container> உள்ளே) ரெண்டர் செய்யும் ஸ்ட்ரக்சரல் டைரக்டிவ் ஆகும். இது டெம்ப்ளேட்டின் உள்ளடக்கத்தை ஸ்டாம்ப் அவுட் செய்கிறது [citation:1][citation:8].
டைனமிக்காக ஒரு புதிய கூறை உருவாக்குகிறது
✗ தவறானது! ngTemplateOutlet டைனமிக் கூறு உருவாக்கத்திற்குப் பயன்படுத்தப்படவில்லை. இது முன்-வரையறுக்கப்பட்ட <ng-template> உள்ளடக்கத்தை மீண்டும் பயன்படுத்துகிறது. டைனமிக் கூறு உருவாக்கத்திற்கு, நீங்கள் ComponentFactoryResolver அல்லது Angular 13+ இல் ஸ்டேண்டலோன் கூறுகளைப் பயன்படுத்தலாம்.
ஒரு குழாயை வரையறுக்கிறது
✗ தவறானது! குழாய்கள் (|) டெம்ப்ளேட்டில் தரவை மாற்றுவதற்கான வேறுபட்ட Angular அம்சமாகும். ngTemplateOutlet ஒரு டைரக்டிவ் ஆகும், இது டெம்ப்ளேட் உள்ளடக்கத்தை ரெண்டர் செய்கிறது, தரவை மாற்றவில்லை.

நடைமுறைப் பயன்பாடு:

ngTemplateOutlet பெரும்பாலும் மிகவும் தனிப்பயனாக்கக்கூடிய கூறுகளை உருவாக்கப் பயன்படுகிறது, அங்கு பயன்படுத்துபவர்கள் கூறுகளுக்குள் காட்சித் துண்டுகளை (டெம்ப்ளேட்டுகள்) அனுப்ப முடியும் [citation:4][citation:6]. இது உள்ளமைக்கப்பட்ட கூறுகளுக்கு ஒரு சக்திவாய்ந்த முறையை வழங்குகிறது, குறிப்பாக அட்டவணைகள், பட்டியல்கள் அல்லது கார்டுகள் போன்ற மீண்டும் மீண்டும் வரும் UI கூறுகளுக்கு.

அடுத்தது