ngTemplateOutlet

[ngTemplateOutlet] bilan havola qilingan shablonni qayta ishlating va ko‘rsating.

ngTemplateOutlet nima?

<ng-template> shablonning qayta ishlatilishi mumkin bo‘lgan qismini ("retsept") belgilaydi.
Uni [ngTemplateOutlet] bilan ko‘rsating.
Qiymatlarni [ngTemplateOutletContext] orqali o‘tkazing va let- o‘zgaruvchilar bilan o‘qing.

ngTemplateOutlet-dan qachon foydalanish kerak

Turli ma’lumotlar yoki renderlash o‘zgarishlari bilan UI naqshlaridan qayta foydalaning.
Murakkab, qayta foydalanish mumkin bo‘lgan mantiq uchun komponentlardan foydalaning.
Yengil, faqat ko‘rish uchun qayta foydalanish uchun shablonlardan foydalaning.

Maslahat: <ng-container> qo‘shimcha DOM elementlarini qo‘shmaydigan mantiqiy o‘ram sifatida foydalaning.

Aloqador: <ng-content> bilan kontent proyeksiyasi uchun componentlar ga qarang.

Misol

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: `
    <h3>Templates with ngTemplateOutlet</h3>

    <label>
      Type:
      <select (change)="type = $any($event.target).value">
        <option value="info">info</option>
        <option value="warning">warning</option>
        <option value="success">success</option>
      </select>
    </label>

    <label>
      Message: <input (input)="msg = $any($event.target).value" [value]="msg" />
    </label>

    <ng-container
      [ngTemplateOutlet]="type === 'info' ? infoTpl : (type === 'warning' ? warnTpl : successTpl)"
      [ngTemplateOutletContext]="{ $implicit: msg }">
    </ng-container>

    <ng-template #infoTpl let-text>
      <p style="color:royalblue">Info: {{ text }}</p>
    </ng-template>

    <ng-template #warnTpl let-text>
      <p style="color:darkorange">Warning: {{ text }}</p>
    </ng-template>

    <ng-template #successTpl let-text>
      <p style="color:seagreen">Success: {{ text }}</p>
    </ng-template>
  `
})
export class App {
  type: 'info' | 'warning' | 'success' = 'info';
  msg = 'Hello';
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

<ng-template> : Qayta foydalanish mumkin bo‘lgan shablon blokini belgilaydi (moslama berilmaguncha ko‘rsatilmaydi).
[ngTemplateOutlet] : Qaysi shablonni ko‘rsatishni tanlaydi (bu yerda type ga asoslangan uchlik ifoda orqali).
[ngTemplateOutletContext] : Shablonga qiymatlarni uzatadi. $implicit kaliti mos keladigan let- o‘zgaruvchi tomonidan o‘qiladi.
let-text : Shablon ichida kontekstdan $implicit qiymatini o‘qiydigan mahalliy o‘zgaruvchini e’lon qiladi.
<ng-container> : Qo‘shimcha DOM elementlarini yaratmaydigan mantiqiy o‘rash.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish